/* Nudjee 2.0 — mobile-first real-world connection UI */

:root {
    --pn-primary: #ff3d6e;
    --pn-primary-deep: #e91e55;
    --pn-primary-soft: #fff0f4;
    --pn-secondary: #7c5cff;
    --pn-brand-friends: #6676ff;
    --pn-brand-business: #23c8b3;
    --pn-brand-romance: #ff6d9b;
    --pn-brand-gradient: linear-gradient(145deg, var(--pn-brand-friends) 0%, var(--pn-brand-business) 50%, var(--pn-brand-romance) 100%);
    --pn-ink: #17181d;
    --pn-muted: #71737f;
    --pn-faint: #a8aab4;
    --pn-line: #e9e9ef;
    --pn-surface: #ffffff;
    --pn-surface-soft: #f7f7fa;
    --pn-success: #17a673;
    --pn-warning: #f4a100;
    --pn-danger: #d9365d;
    --pn-shadow-sm: 0 8px 24px rgba(28, 24, 40, .08);
    --pn-shadow-md: 0 18px 52px rgba(28, 24, 40, .15);
    --pn-shadow-lg: 0 30px 90px rgba(28, 24, 40, .22);
    --pn-radius-sm: 12px;
    --pn-radius-md: 18px;
    --pn-radius-lg: 28px;
    --pn-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#pn-app,
.pn-modal-overlay,
.pn-guest-shell,
.pn-app-shell * {
    box-sizing: border-box;
}

.pn-app-shell,
.pn-modal-overlay,
.pn-guest-shell {
    font-family: var(--pn-font);
    color: var(--pn-ink);
    -webkit-font-smoothing: antialiased;
}

.pn-icon-svg {
    width: 22px;
    height: 22px;
    display: inline-block;
    flex: 0 0 auto;
}

.pn-app-shell button,
.pn-app-shell input,
.pn-app-shell select,
.pn-modal-overlay button,
.pn-modal-overlay input,
.pn-modal-overlay select,
.pn-guest-shell button,
.pn-guest-shell input,
.pn-guest-shell select {
    font: inherit;
}

.pn-app-shell button,
.pn-modal-overlay button,
.pn-guest-shell button {
    -webkit-tap-highlight-color: transparent;
}

body.pn-modal-open {
    overflow: hidden;
}

/* Guest / sign-in experience */
.pn-guest-shell {
    position: relative;
    width: min(100%, 1160px);
    min-height: 720px;
    margin: 24px auto;
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 61, 110, .22), transparent 34%),
        radial-gradient(circle at 85% 75%, rgba(124, 92, 255, .22), transparent 38%),
        linear-gradient(145deg, #1d1521 0%, #17131e 48%, #0f1016 100%);
    box-shadow: var(--pn-shadow-lg);
    padding: 72px 28px;
    display: grid;
    place-items: center;
}

.pn-guest-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(4px);
    opacity: .65;
}

.pn-guest-glow-one {
    width: 260px;
    height: 260px;
    top: -90px;
    right: 9%;
    background: rgba(255, 61, 110, .2);
}

.pn-guest-glow-two {
    width: 320px;
    height: 320px;
    bottom: -120px;
    left: 5%;
    background: rgba(124, 92, 255, .16);
}

.pn-guest-card {
    position: relative;
    z-index: 2;
    width: min(100%, 660px);
    text-align: center;
    color: white;
}

.pn-brand-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--pn-primary), #ff7b72);
    color: white;
    box-shadow: 0 14px 38px rgba(255, 61, 110, .34);
}

.pn-brand-mark .pn-icon-svg {
    width: 32px;
    height: 32px;
}

.pn-brand-mark-small {
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 15px;
    box-shadow: 0 8px 22px rgba(255, 61, 110, .24);
}

.pn-brand-mark-small .pn-icon-svg {
    width: 22px;
    height: 22px;
}

.pn-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .15em;
    color: var(--pn-primary);
}

.pn-guest-card h1 {
    margin: 10px auto 18px;
    max-width: 620px;
    font-size: clamp(40px, 6vw, 66px);
    line-height: .98;
    letter-spacing: -.055em;
    color: white;
}

.pn-guest-card > p {
    margin: 0 auto;
    max-width: 580px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
}

.pn-guest-steps {
    margin: 42px 0 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: left;
}

.pn-guest-steps > div {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    background: rgba(255, 255, 255, .055);
    backdrop-filter: blur(12px);
}

.pn-guest-steps span {
    width: 28px;
    height: 28px;
    margin-bottom: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 61, 110, .2);
    color: #ff7697;
    font-size: 12px;
    font-weight: 800;
}

.pn-guest-steps strong,
.pn-guest-steps small {
    display: block;
}

.pn-guest-steps strong {
    margin-bottom: 7px;
    font-size: 14px;
}

.pn-guest-steps small {
    color: rgba(255, 255, 255, .56);
    line-height: 1.45;
}

.pn-guest-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pn-trust-line {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, .52);
}

.pn-trust-line .pn-icon-svg {
    width: 16px;
    height: 16px;
}

/* App shell */
.pn-app-shell {
    width: min(100%, 1180px);
    min-height: 760px;
    margin: 16px auto;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(35, 32, 45, .06);
    border-radius: 30px;
    background: var(--pn-surface);
    box-shadow: var(--pn-shadow-md);
}

.pn-app-header {
    height: 72px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--pn-line);
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 1002;
}

.pn-brand-button {
    border: 0;
    padding: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    color: var(--pn-ink);
}

.pn-brand-button > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pn-brand-button strong {
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.pn-brand-button small {
    margin-top: 3px;
    font-size: 10px;
    color: var(--pn-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pn-presence-cluster {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pn-status-pill {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: white;
    color: var(--pn-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    transition: .2s ease;
}

.pn-status-pill:hover {
    border-color: #d9d9e2;
    box-shadow: var(--pn-shadow-sm);
}

.pn-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pn-warning);
    box-shadow: 0 0 0 4px rgba(244, 161, 0, .12);
}

.pn-status-pill.is-live {
    color: #0a7954;
    border-color: rgba(23, 166, 115, .22);
    background: #f0fff9;
}

.pn-status-pill.is-live .pn-status-dot {
    background: var(--pn-success);
    box-shadow: 0 0 0 4px rgba(23, 166, 115, .13);
    animation: pnSoftPulse 1.8s infinite;
}

.pn-status-pill.is-error {
    color: var(--pn-danger);
    border-color: rgba(217, 54, 93, .2);
    background: #fff5f7;
}

.pn-status-pill.is-error .pn-status-dot {
    background: var(--pn-danger);
    box-shadow: 0 0 0 4px rgba(217, 54, 93, .12);
}

.pn-icon-button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: white;
    color: var(--pn-ink);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.pn-icon-button:hover {
    transform: translateY(-1px);
    border-color: #d8d8e1;
    background: var(--pn-surface-soft);
}

.pn-icon-button.is-active,
#pn-visibility-toggle.is-active {
    background: #22232a;
    color: white;
    border-color: #22232a;
}

.pn-discover-view {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(330px, .78fr);
    min-height: 688px;
    padding-bottom: 76px;
}

.pn-map-stage {
    min-width: 0;
    position: relative;
    background: #ececf1;
    overflow: hidden;
}

#pn-map-container {
    width: 100%;
    height: 100%;
    min-height: 688px;
    background: #eaeaf0;
    z-index: 1;
}

.leaflet-container {
    font-family: var(--pn-font);
}

.leaflet-control-zoom,
.leaflet-control-attribution {
    display: none !important;
}

.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 20px;
    box-shadow: var(--pn-shadow-md);
}

.leaflet-popup-content {
    margin: 0;
    min-width: 230px;
}

.leaflet-popup-tip {
    box-shadow: none;
}

.pn-radar-pill {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    box-shadow: var(--pn-shadow-sm);
    font-size: 11px;
    font-weight: 800;
    color: var(--pn-ink);
    letter-spacing: .02em;
}

.pn-radar-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--pn-primary);
    animation: pnSoftPulse 1.3s infinite;
}

.pn-map-safety-card {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 250px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    box-shadow: var(--pn-shadow-sm);
}

.pn-map-safety-card .pn-icon-svg {
    color: var(--pn-success);
}

.pn-map-safety-card span {
    display: flex;
    flex-direction: column;
}

.pn-map-safety-card strong {
    font-size: 11px;
}

.pn-map-safety-card small {
    margin-top: 2px;
    color: var(--pn-muted);
    font-size: 10px;
}

.pn-map-controls {
    position: absolute;
    z-index: 850;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pn-map-control {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    color: var(--pn-ink);
    display: grid;
    place-items: center;
    box-shadow: var(--pn-shadow-sm);
    cursor: pointer;
    transition: transform .18s ease;
}

.pn-map-control:hover {
    transform: translateY(-2px);
}

.pn-map-control-primary {
    border-color: transparent;
    background: linear-gradient(145deg, var(--pn-primary), #ff6f70);
    color: white;
}

.pn-map-control.is-live {
    background: #1b1c23;
    color: white;
}

.pn-nearby-panel {
    min-width: 0;
    padding: 30px 24px;
    border-left: 1px solid var(--pn-line);
    background: linear-gradient(180deg, #fff 0%, #fafafd 100%);
    display: flex;
    flex-direction: column;
}

.pn-nearby-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.pn-nearby-heading h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--pn-ink);
}

.pn-text-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pn-primary-deep);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.pn-text-button-centred {
    display: block;
    margin: 14px auto 0;
    text-align: center;
}

.pn-nearby-card {
    min-height: 390px;
    padding: 20px;
    border: 1px solid var(--pn-line);
    border-radius: 28px;
    background: white;
    box-shadow: 0 14px 42px rgba(32, 28, 43, .08);
    overflow: hidden;
    position: relative;
}

.pn-nearby-card.is-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pn-empty-orbit {
    width: 120px;
    height: 120px;
    position: relative;
    margin-bottom: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 50%, #fff 0 37%, #fff2f6 38% 100%);
    color: var(--pn-primary);
}

.pn-empty-orbit:before,
.pn-empty-orbit:after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 61, 110, .18);
    border-radius: 50%;
}

.pn-empty-orbit:before {
    inset: 10px;
}

.pn-empty-orbit:after {
    inset: -8px;
}

.pn-empty-orbit > span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pn-primary);
    box-shadow: 0 0 0 4px rgba(255, 61, 110, .1);
}

.pn-empty-orbit > span:nth-child(1) { top: 15px; left: 28px; }
.pn-empty-orbit > span:nth-child(2) { right: 9px; top: 56px; opacity: .55; }
.pn-empty-orbit > span:nth-child(3) { left: 18px; bottom: 18px; opacity: .35; }

.pn-empty-orbit .pn-icon-svg {
    width: 34px;
    height: 34px;
}

.pn-empty-copy strong,
.pn-empty-copy span {
    display: block;
}

.pn-empty-copy strong {
    max-width: 280px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.25;
}

.pn-empty-copy span {
    margin: 9px auto 20px;
    max-width: 290px;
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.55;
}

.pn-nearby-person-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pn-nearby-person-photo {
    height: 245px;
    margin: -20px -20px 18px;
    position: relative;
    background-position: center;
    background-size: cover;
}

.pn-nearby-person-photo:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(17, 18, 24, .72) 100%);
}

.pn-distance-chip {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(23, 24, 29, .46);
    backdrop-filter: blur(10px);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 750;
}

.pn-distance-chip .pn-icon-svg {
    width: 14px;
    height: 14px;
}

.pn-nearby-person-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pn-nearby-person-topline h3 {
    margin: 0;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--pn-ink);
}

.pn-nearby-person-topline small {
    display: block;
    margin-top: 7px;
    color: var(--pn-muted);
    font-size: 12px;
}

.pn-live-dot {
    padding: 7px 10px;
    border-radius: 999px;
    background: #effff8;
    color: #0d875e;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pn-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pn-tag {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--pn-surface-soft);
    color: #555762;
    font-size: 11px;
    font-weight: 700;
}

.pn-nearby-actions {
    margin-top: auto;
    padding-top: 18px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
}

.pn-profile-peek {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    background: white;
    display: grid;
    place-items: center;
    color: var(--pn-ink);
    cursor: pointer;
}

.pn-intent-note {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--pn-muted);
    font-size: 11px;
    line-height: 1.5;
}

.pn-intent-note .pn-icon-svg {
    width: 18px;
    height: 18px;
    color: var(--pn-primary);
}

/* Buttons and forms */
.pn-btn {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 15px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.pn-btn:hover {
    transform: translateY(-1px);
}

.pn-btn:disabled {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
}

.pn-btn-primary {
    background: linear-gradient(145deg, var(--pn-primary), #ff6b70);
    color: white !important;
    box-shadow: 0 11px 25px rgba(255, 61, 110, .22);
}

.pn-btn-primary:hover {
    color: white !important;
    box-shadow: 0 14px 30px rgba(255, 61, 110, .29);
}

.pn-btn-secondary {
    border-color: var(--pn-line);
    background: white;
    color: var(--pn-ink) !important;
}

.pn-btn-compact {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 13px;
    font-size: 12px;
}

.pn-field {
    display: block;
}

.pn-field > span {
    display: block;
    margin-bottom: 7px;
    color: #51535e;
    font-size: 11px;
    font-weight: 800;
}

.pn-field > span small {
    color: var(--pn-faint);
    font-weight: 600;
}

.pn-input {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--pn-line) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--pn-ink) !important;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pn-input:focus {
    border-color: rgba(255, 61, 110, .5) !important;
    box-shadow: 0 0 0 4px rgba(255, 61, 110, .08) !important;
}

.pn-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pn-inline-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pn-form-message {
    min-height: 18px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--pn-muted);
}

.pn-form-message.is-error { color: var(--pn-danger); }
.pn-form-message.is-success { color: var(--pn-success); }
.pn-form-message.is-info { color: var(--pn-muted); }

.pn-app-shell input[type="range"],
.pn-modal-overlay input[type="range"] {
    width: 100%;
    accent-color: var(--pn-primary);
}

.pn-range-label {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

/* Bottom navigation */
.pn-bottom-nav {
    height: 76px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    padding: 8px 12px 9px;
    border-top: 1px solid var(--pn-line);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.pn-nav-item {
    position: relative;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #92949e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 750;
    transition: color .18s ease, background .18s ease;
}

.pn-nav-item .pn-icon-svg {
    width: 21px;
    height: 21px;
}

.pn-nav-item.is-active {
    color: var(--pn-primary);
    background: var(--pn-primary-soft);
}

.pn-nav-item i {
    width: 8px;
    height: 8px;
    position: absolute;
    top: 7px;
    right: calc(50% - 18px);
    border: 2px solid white;
    border-radius: 50%;
    background: var(--pn-primary);
}

/* Modals and sheets */
.pn-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    padding: 18px;
    background: rgba(18, 16, 24, .54);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pn-modal-content {
    width: min(100%, 560px);
    max-height: min(88vh, 850px);
    overflow: hidden;
    border-radius: 26px;
    background: var(--pn-surface);
    box-shadow: var(--pn-shadow-lg);
    display: flex;
    flex-direction: column;
    animation: pnModalIn .24s ease both;
}

.pn-hub-shell {
    min-height: min(80vh, 720px);
}

.pn-modal-header {
    min-height: 78px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--pn-line);
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
}

.pn-modal-header h3 {
    margin: 0;
    color: var(--pn-ink);
    font-size: 25px;
    line-height: 1;
    letter-spacing: -.035em;
}

.pn-hub-view {
    min-height: 0;
    overflow-y: auto;
    flex: 1;
    background: #fbfbfd;
}

.pn-view-intro {
    margin: 16px;
    padding: 15px;
    border: 1px solid #f1dce3;
    border-radius: 16px;
    background: #fff7fa;
}

.pn-view-intro strong,
.pn-view-intro span {
    display: block;
}

.pn-view-intro strong {
    font-size: 12px;
}

.pn-view-intro span {
    margin-top: 4px;
    color: var(--pn-muted);
    font-size: 11px;
}

.pn-list-stack {
    padding: 10px 14px 24px;
}

.pn-list-loading,
.pn-empty-list {
    padding: 52px 24px;
    color: var(--pn-muted);
    text-align: center;
    font-size: 13px;
}

.pn-list-item,
.pn-conv-item,
.pn-inbox-item,
.pn-hotspot-card,
.pn-blocked-item {
    width: 100%;
    margin-bottom: 9px;
    padding: 13px;
    border: 1px solid var(--pn-line);
    border-radius: 17px;
    background: white;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pn-list-item:hover,
.pn-conv-item:hover,
.pn-inbox-item:hover,
.pn-hotspot-card:hover {
    transform: translateY(-1px);
    border-color: #dcdce5;
    box-shadow: var(--pn-shadow-sm);
}

.pn-inbox-avatar {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    flex: 0 0 auto;
    background-position: center;
    background-size: cover;
    background-color: #ececf1;
}

.pn-conv-info,
.pn-hotspot-info,
.pn-list-copy {
    min-width: 0;
    flex: 1;
}

.pn-conv-name,
.pn-hotspot-name,
.pn-list-title {
    display: block;
    color: var(--pn-ink);
    font-size: 13px;
    font-weight: 800;
}

.pn-conv-preview,
.pn-hotspot-meta,
.pn-list-meta {
    margin-top: 4px;
    color: var(--pn-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.pn-unread-bold {
    border-color: rgba(255, 61, 110, .25);
    background: #fff9fb;
}

.pn-unread-bold .pn-conv-name {
    color: var(--pn-primary-deep);
}

.pn-list-time {
    flex: 0 0 auto;
    color: var(--pn-faint);
    font-size: 10px;
}

.pn-action-button-small {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: var(--pn-primary-soft);
    color: var(--pn-primary-deep);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

/* Onboarding */
.pn-onboarding-overlay {
    overflow-y: auto;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 61, 110, .24), transparent 35%),
        radial-gradient(circle at 88% 80%, rgba(124, 92, 255, .2), transparent 35%),
        rgba(16, 14, 21, .9);
}

.pn-onboarding-shell {
    width: min(100%, 620px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 30px;
    background: white;
    box-shadow: var(--pn-shadow-lg);
    animation: pnModalIn .3s ease both;
}

.pn-onboarding-progress {
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.pn-onboarding-progress span {
    height: 4px;
    border-radius: 999px;
    background: #ececf1;
    transition: background .25s ease;
}

.pn-onboarding-progress span.is-active,
.pn-onboarding-progress span.is-complete {
    background: linear-gradient(90deg, var(--pn-primary), #ff7c72);
}

.pn-onboarding-step {
    display: none;
}

.pn-onboarding-step.is-active {
    display: block;
    animation: pnStepIn .28s ease both;
}

.pn-onboarding-hero {
    margin-bottom: 24px;
}

.pn-onboarding-hero .pn-brand-mark {
    margin-left: 0;
}

.pn-onboarding-hero h2 {
    margin: 0;
    color: var(--pn-ink);
    font-size: clamp(30px, 6vw, 42px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.pn-onboarding-hero p {
    margin: 13px 0 0;
    color: var(--pn-muted);
    font-size: 14px;
    line-height: 1.6;
}

.pn-onboarding-hero-centred {
    text-align: center;
}

.pn-onboarding-form {
    display: grid;
    gap: 15px;
}

.pn-onboarding-photo {
    padding: 12px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: var(--pn-surface-soft);
    display: flex;
    align-items: center;
    gap: 13px;
}

.pn-photo-picker {
    width: 68px;
    height: 68px;
    padding: 0;
    position: relative;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #e7e7ec;
    flex: 0 0 auto;
    cursor: pointer;
}

.pn-photo-picker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pn-photo-picker > span {
    width: 26px;
    height: 26px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    border: 2px solid white;
    border-radius: 9px;
    background: var(--pn-primary);
    color: white;
    display: grid;
    place-items: center;
}

.pn-photo-picker .pn-icon-svg {
    width: 14px;
    height: 14px;
}

.pn-onboarding-photo strong,
.pn-onboarding-photo small {
    display: block;
}

.pn-onboarding-photo strong {
    font-size: 13px;
}

.pn-onboarding-photo small {
    margin-top: 4px;
    color: var(--pn-muted);
    font-size: 11px;
    line-height: 1.4;
}

.pn-consent-row {
    padding: 13px;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
}

.pn-consent-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--pn-primary);
}

.pn-consent-row span {
    display: flex;
    flex-direction: column;
}

.pn-consent-row strong { font-size: 12px; }
.pn-consent-row small { margin-top: 3px; color: var(--pn-muted); font-size: 10px; }

.pn-permission-stack {
    display: grid;
    gap: 12px;
}

.pn-permission-card {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--pn-line);
    border-radius: 19px;
    background: white;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.pn-permission-card:hover {
    transform: translateY(-1px);
    border-color: #d9d9e2;
}

.pn-permission-card.is-granted {
    border-color: rgba(23, 166, 115, .24);
    background: #f4fffb;
}

.pn-permission-card.is-denied {
    border-color: rgba(217, 54, 93, .2);
    background: #fff7f9;
}

.pn-permission-icon,
.pn-setting-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--pn-primary-soft);
    color: var(--pn-primary);
    display: grid;
    place-items: center;
}

.pn-permission-copy strong,
.pn-permission-copy small {
    display: block;
}

.pn-permission-copy strong {
    font-size: 13px;
}

.pn-permission-copy small {
    margin-top: 4px;
    color: var(--pn-muted);
    font-size: 10px;
    line-height: 1.45;
}

.pn-permission-state {
    padding: 7px 9px;
    border-radius: 999px;
    background: var(--pn-primary-soft);
    color: var(--pn-primary-deep);
    font-size: 10px;
    font-weight: 850;
}

.pn-permission-card.is-granted .pn-permission-state {
    background: #e7fff5;
    color: #0a7b55;
}

.pn-privacy-explainer {
    margin: 18px 0;
    padding: 14px;
    border-radius: 17px;
    background: #f4f3ff;
    color: #5d5884;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
    line-height: 1.5;
}

.pn-privacy-explainer .pn-icon-svg {
    color: var(--pn-secondary);
}

.pn-ready-visual {
    width: 170px;
    height: 170px;
    margin: 22px auto 32px;
    position: relative;
    display: grid;
    place-items: center;
}

.pn-ready-visual img {
    width: 98px;
    height: 98px;
    position: relative;
    z-index: 2;
    border: 5px solid white;
    border-radius: 32px;
    object-fit: cover;
    box-shadow: var(--pn-shadow-md);
}

.pn-ready-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 61, 110, .17);
}

.pn-ready-ring-one { inset: 18px; }
.pn-ready-ring-two { inset: 0; border-color: rgba(124, 92, 255, .12); }

.pn-ready-check {
    width: 36px;
    height: 36px;
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 30px;
    border: 4px solid white;
    border-radius: 50%;
    background: var(--pn-success);
    color: white;
    display: grid;
    place-items: center;
}

.pn-ready-check .pn-icon-svg {
    width: 17px;
    height: 17px;
}

/* Action sheets */
.pn-sheet-overlay {
    align-items: flex-end;
}

.pn-action-sheet {
    width: min(100%, 480px);
    padding: 28px;
    position: relative;
    border-radius: 28px;
    background: white;
    box-shadow: var(--pn-shadow-lg);
    text-align: center;
    animation: pnSheetIn .25s ease both;
}

.pn-sheet-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.pn-action-sheet h2 {
    margin: 0;
    color: var(--pn-ink);
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.pn-action-sheet > p {
    margin: 12px auto 18px;
    max-width: 380px;
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.55;
}

.pn-nudge-person {
    width: 108px;
    height: 108px;
    margin: 4px auto 25px;
    position: relative;
}

.pn-nudge-person img {
    width: 100%;
    height: 100%;
    border-radius: 34px;
    object-fit: cover;
    background: #e8e8ed;
}

.pn-nudge-wave {
    width: 40px;
    height: 40px;
    position: absolute;
    right: -9px;
    bottom: -8px;
    border: 4px solid white;
    border-radius: 50%;
    background: var(--pn-primary);
    display: grid;
    place-items: center;
    font-size: 19px;
}

.pn-nudge-boundary {
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 14px;
    background: var(--pn-surface-soft);
    color: var(--pn-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}

.pn-nudge-boundary .pn-icon-svg {
    width: 16px;
    height: 16px;
    color: var(--pn-success);
}

.pn-action-sheet > .pn-btn {
    width: 100%;
}

.pn-profile-sheet {
    max-height: 86vh;
    overflow-y: auto;
}

.pn-public-profile-photo {
    width: 160px;
    height: 190px;
    margin: 0 auto 18px;
    border-radius: 30px;
    object-fit: cover;
    box-shadow: var(--pn-shadow-md);
}

.pn-public-profile-name {
    margin: 0;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.045em;
}

.pn-public-profile-meta {
    margin-top: 8px;
    color: var(--pn-muted);
    font-size: 12px;
}

/* Profile settings */
.pn-profile-form {
    padding: 15px 15px 92px;
}

.pn-profile-hero-card {
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(145deg, #211a27, #17181f);
    color: white;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pn-profile-photo-button {
    width: 74px;
    height: 74px;
    padding: 0;
    position: relative;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #31313a;
    flex: 0 0 auto;
    cursor: pointer;
}

.pn-profile-photo-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pn-profile-photo-button > span {
    width: 26px;
    height: 26px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    border: 2px solid white;
    border-radius: 9px;
    background: var(--pn-primary);
    display: grid;
    place-items: center;
}

.pn-profile-photo-button .pn-icon-svg {
    width: 13px;
    height: 13px;
}

.pn-profile-summary {
    min-width: 0;
}

.pn-profile-summary h3 {
    margin: 7px 0 3px;
    color: white;
    font-size: 21px;
    line-height: 1;
}

.pn-profile-summary small {
    color: rgba(255, 255, 255, .56);
    font-size: 10px;
    word-break: break-all;
}

.pn-plan-chip {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pn-plan-chip.is-pro {
    background: rgba(255, 61, 110, .19);
    color: #ff8aa7;
}

.pn-settings-card {
    margin-top: 12px;
    border: 1px solid var(--pn-line);
    border-radius: 19px;
    background: white;
    overflow: hidden;
}

.pn-settings-card-padded {
    padding: 15px;
    overflow: visible;
}

.pn-setting-row {
    min-height: 70px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--pn-line);
}

.pn-setting-row:last-child {
    border-bottom: 0;
}

.pn-setting-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.pn-setting-icon .pn-icon-svg {
    width: 18px;
    height: 18px;
}

.pn-setting-copy {
    min-width: 0;
    flex: 1;
}

.pn-setting-copy strong,
.pn-setting-copy small {
    display: block;
}

.pn-setting-copy strong {
    font-size: 12px;
}

.pn-setting-copy small {
    margin-top: 3px;
    color: var(--pn-muted);
    font-size: 10px;
}

.pn-setting-button {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: white;
    text-align: left;
    cursor: pointer;
}

.pn-section-heading {
    margin: 23px 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}

.pn-section-heading > span {
    font-size: 12px;
    font-weight: 850;
    color: var(--pn-ink);
}

.pn-section-heading small {
    color: var(--pn-faint);
    font-size: 9px;
    text-align: right;
}

.pn-privacy-check-grid {
    margin-top: 13px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.pn-privacy-check-grid label {
    padding: 10px;
    border-radius: 12px;
    background: var(--pn-surface-soft);
    color: #5c5e68;
    font-size: 10px;
    font-weight: 700;
}

.pn-privacy-check-grid input {
    accent-color: var(--pn-primary);
}

.pn-interest-editor {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.pn-zone-item {
    margin-bottom: 8px;
    padding: 11px;
    border: 1px solid var(--pn-line);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pn-zone-item strong {
    display: block;
    font-size: 11px;
}

.pn-zone-item small {
    display: block;
    margin-top: 2px;
    color: var(--pn-muted);
    font-size: 9px;
}

.pn-zone-delete {
    border: 0;
    background: transparent;
    color: var(--pn-danger);
    font-size: 18px;
    cursor: pointer;
}

.pn-sticky-save {
    position: sticky;
    bottom: -15px;
    z-index: 2;
    margin: 18px -15px -92px;
    padding: 12px 15px 15px;
    border-top: 1px solid var(--pn-line);
    background: rgba(251, 251, 253, .95);
    backdrop-filter: blur(12px);
}

.pn-sticky-save .pn-btn {
    width: 100%;
}

/* Switch */
.pn-switch {
    width: 45px;
    height: 25px;
    position: relative;
    flex: 0 0 auto;
}

.pn-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.pn-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d8d8df;
    cursor: pointer;
    transition: .2s ease;
}

.pn-slider:before {
    content: "";
    width: 19px;
    height: 19px;
    position: absolute;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
    transition: transform .2s ease;
}

.pn-switch input:checked + .pn-slider {
    background: var(--pn-primary);
}

.pn-switch input:checked + .pn-slider:before {
    transform: translateX(20px);
}

/* Chat */
.pn-chat-shell {
    height: min(88vh, 780px);
}

.pn-chat-header {
    min-height: 70px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--pn-line);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.pn-chat-person {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}

.pn-chat-person img {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    object-fit: cover;
    background: #e7e7ec;
}

.pn-chat-person span {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pn-chat-person strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.pn-chat-person small {
    margin-top: 2px;
    color: var(--pn-muted);
    font-size: 10px;
}

.pn-chat-menu {
    display: flex;
    gap: 5px;
}

.pn-chat-menu .pn-icon-button {
    width: 36px;
    height: 36px;
}

.pn-chat-messages {
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    background: linear-gradient(180deg, #fbfbfd, #f5f5f9);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pn-msg {
    max-width: 78%;
    padding: 10px 13px;
    border-radius: 17px;
    position: relative;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.pn-msg-sent {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: linear-gradient(145deg, var(--pn-primary), #ff6b70);
    color: white;
}

.pn-msg-received {
    align-self: flex-start;
    border: 1px solid var(--pn-line);
    border-bottom-left-radius: 5px;
    background: white;
    color: var(--pn-ink);
}

.pn-msg-time {
    display: block;
    margin-top: 4px;
    text-align: right;
    font-size: 8px;
    opacity: .68;
}

.pn-tick-read { color: #d7f5ff; }

.pn-chat-input-area {
    padding: 11px;
    border-top: 1px solid var(--pn-line);
    background: white;
    display: flex;
    gap: 8px;
}

#pn-chat-input {
    min-width: 0;
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid var(--pn-line);
    border-radius: 15px;
    background: var(--pn-surface-soft);
    outline: none;
    flex: 1;
}

#pn-chat-send {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: var(--pn-primary);
    color: white;
    display: grid;
    place-items: center;
    cursor: pointer;
}

#pn-chat-send .pn-icon-svg {
    width: 18px;
    height: 18px;
}

/* Markers and map cards */
.pn-face-marker,
.pn-me-marker {
    background: transparent !important;
    border: 0 !important;
}

.pn-face-marker > div,
.pn-me-marker > div {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    border: 3px solid white;
    box-shadow: 0 7px 22px rgba(21, 18, 30, .28);
}

.pn-face-marker > div {
    outline: 3px solid rgba(255, 61, 110, .6);
}

.pn-me-marker > div {
    border-radius: 50%;
    outline: 3px solid rgba(23, 166, 115, .64);
}

.pn-map-card {
    padding: 14px;
}

.pn-map-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pn-map-profile-trigger {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pn-map-profile-trigger:hover strong {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pn-map-profile-trigger:focus-visible {
    outline: 2px solid var(--pn-primary);
    outline-offset: 4px;
    border-radius: 12px;
}

.pn-map-card-avatar {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    object-fit: cover;
}

.pn-map-card strong {
    display: block;
    font-size: 13px;
}

.pn-map-meta {
    margin-top: 3px;
    color: var(--pn-muted);
    font-size: 10px;
}

.pn-map-card .pn-btn {
    width: 100%;
    min-height: 38px;
    margin-top: 12px;
    border-radius: 12px;
    font-size: 11px;
}

.pn-hotspot-circle {
    animation: pnHotspotPulse 2.4s infinite;
}


.pn-zoom-cluster-circle {
    animation: none;
    cursor: zoom-in;
}

.pn-zoom-cluster-count {
    background: transparent !important;
    border: 0 !important;
    pointer-events: none !important;
}

.pn-zoom-cluster-count > span {
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .96);
    border-radius: 50%;
    background: rgba(255, 61, 110, .94);
    box-shadow: 0 7px 20px rgba(55, 18, 31, .22);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

/* Upgrade */
.pn-upgrade-card {
    margin: 18px;
    padding: 32px 24px;
    border-radius: 25px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 61, 110, .27), transparent 32%),
        linear-gradient(145deg, #231a29, #15161d);
    color: white;
    text-align: center;
}

.pn-upgrade-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: linear-gradient(145deg, var(--pn-primary), #ff7c72);
    display: grid;
    place-items: center;
}

.pn-upgrade-card h2 {
    margin: 0;
    color: white;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -.045em;
}

.pn-upgrade-card p {
    color: rgba(255, 255, 255, .63);
    font-size: 13px;
    line-height: 1.55;
}

.pn-price-line {
    margin: 25px 0;
}

.pn-price-line strong {
    font-size: 46px;
    letter-spacing: -.05em;
}

.pn-price-line span {
    color: rgba(255, 255, 255, .5);
}

.pn-upgrade-card ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.pn-upgrade-card li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}

.pn-upgrade-card li .pn-icon-svg {
    width: 16px;
    height: 16px;
    color: #6ce1b5;
}

.pn-upgrade-card .pn-btn {
    width: 100%;
}

/* Toasts */
.pn-toast-region {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100500;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.pn-toast {
    min-width: 250px;
    max-width: 360px;
    padding: 13px 15px;
    border-radius: 15px;
    background: #202128;
    color: white;
    box-shadow: var(--pn-shadow-md);
    font-size: 12px;
    line-height: 1.45;
    animation: pnToastIn .22s ease both;
}

.pn-toast.is-error { background: #7e2038; }
.pn-toast.is-success { background: #145d46; }

/* Animations */
@keyframes pnModalIn {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pnSheetIn {
    from { opacity: 0; transform: translateY(35px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pnStepIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pnToastIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pnSoftPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.86); opacity: .65; }
}

@keyframes pnHotspotPulse {
    0%, 100% { stroke-opacity: .7; fill-opacity: .14; }
    50% { stroke-opacity: .32; fill-opacity: .24; }
}

/* Responsive */
@media (max-width: 860px) {
    .pn-app-shell {
        width: 100%;
        min-height: 100svh;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .pn-app-header {
        height: 66px;
        padding: 0 14px;
    }

    .pn-brand-button small {
        display: none;
    }

    .pn-status-pill {
        min-height: 34px;
        padding: 0 11px;
    }

    .pn-discover-view {
        display: block;
        min-height: calc(100svh - 66px);
        padding-bottom: 72px;
    }

    .pn-map-stage {
        height: 56svh;
        min-height: 390px;
    }

    #pn-map-container {
        min-height: 390px;
        height: 100%;
    }

    .pn-map-safety-card {
        left: 12px;
        bottom: 12px;
        max-width: 210px;
        padding: 10px 11px;
    }

    .pn-map-controls {
        right: 12px;
        bottom: 12px;
    }

    .pn-nearby-panel {
        min-height: 390px;
        padding: 22px 14px 28px;
        border-left: 0;
        border-top: 1px solid var(--pn-line);
    }

    .pn-nearby-card {
        min-height: 350px;
    }

    .pn-bottom-nav {
        position: fixed;
        height: 72px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .pn-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .pn-modal-content,
    .pn-hub-shell,
    .pn-chat-shell {
        width: 100%;
        height: min(92svh, 880px);
        max-height: 92svh;
        border-radius: 25px 25px 0 0;
    }

    .pn-action-sheet {
        width: 100%;
        border-radius: 27px 27px 0 0;
        padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
    }

    .pn-onboarding-overlay {
        align-items: center;
        padding: 10px;
    }

    .pn-onboarding-shell {
        max-height: calc(100svh - 20px);
        padding: 22px 18px;
        border-radius: 25px;
    }

    .pn-guest-shell {
        min-height: 100svh;
        margin: 0;
        border-radius: 0;
        padding: 54px 20px;
    }

    .pn-guest-steps {
        grid-template-columns: 1fr;
    }

    .pn-guest-steps > div {
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 10px;
    }

    .pn-guest-steps span {
        grid-row: 1 / 3;
        margin: 0;
    }

    .pn-guest-actions {
        display: grid;
    }
}

@media (max-width: 520px) {
    .pn-brand-button > span:last-child {
        display: none;
    }

    .pn-presence-cluster {
        margin-left: auto;
    }

    .pn-map-safety-card {
        max-width: 185px;
    }

    .pn-map-safety-card small {
        display: none;
    }

    .pn-nearby-person-photo {
        height: 225px;
    }

    .pn-form-grid,
    .pn-inline-inputs,
    .pn-privacy-check-grid {
        grid-template-columns: 1fr;
    }

    .pn-onboarding-hero h2 {
        font-size: 31px;
    }

    .pn-permission-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .pn-permission-state {
        grid-column: 2;
        width: fit-content;
    }

    .pn-guest-card h1 {
        font-size: 42px;
    }

    .pn-trust-line {
        align-items: flex-start;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-app-shell *, .pn-app-shell *:before, .pn-app-shell *:after,
    .pn-modal-overlay *, .pn-modal-overlay *:before, .pn-modal-overlay *:after,
    .pn-guest-shell *, .pn-guest-shell *:before, .pn-guest-shell *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Custom account access and plan selection */
.pn-guest-plan-link {
    margin: 18px auto 0;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .76);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.pn-auth-overlay {
    padding: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 61, 110, .17), transparent 31%),
        rgba(13, 12, 18, .72);
}

.pn-auth-shell {
    position: relative;
    width: min(1120px, 100%);
    max-height: min(92vh, 900px);
    display: grid;
    grid-template-columns: minmax(280px, .76fr) minmax(0, 1.5fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 30px;
    background: #fff;
    box-shadow: var(--pn-shadow-lg);
}

.pn-auth-close {
    position: absolute;
    z-index: 5;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,.9);
}

.pn-auth-story {
    position: relative;
    min-height: 670px;
    padding: 52px 38px;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 15%, rgba(255, 61, 110, .35), transparent 34%),
        radial-gradient(circle at 80% 82%, rgba(124, 92, 255, .28), transparent 42%),
        linear-gradient(150deg, #251827 0%, #17141d 58%, #101116 100%);
    color: white;
}

.pn-auth-story:after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    right: -120px;
    bottom: -100px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018);
}

.pn-auth-story .pn-brand-mark { margin: 0 0 44px; }
.pn-auth-story h2 {
    position: relative;
    z-index: 1;
    margin: 10px 0 20px;
    color: white;
    font-size: clamp(40px, 5vw, 60px);
    line-height: .98;
    letter-spacing: -.055em;
}
.pn-auth-story > p {
    position: relative;
    z-index: 1;
    max-width: 360px;
    color: rgba(255,255,255,.65);
    font-size: 15px;
    line-height: 1.65;
}
.pn-auth-safety {
    position: absolute;
    z-index: 2;
    left: 38px;
    right: 38px;
    bottom: 40px;
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
}
.pn-auth-safety strong,
.pn-auth-safety small { display: block; }
.pn-auth-safety strong { font-size: 12px; }
.pn-auth-safety small { margin-top: 3px; color: rgba(255,255,255,.55); font-size: 10px; }

.pn-auth-main {
    min-width: 0;
    max-height: min(92vh, 900px);
    overflow-y: auto;
    padding: 36px 42px 46px;
    background: linear-gradient(180deg, #fff, #fbfbfd);
}

.pn-auth-tabs {
    width: fit-content;
    margin: 0 0 34px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
    background: var(--pn-surface-soft);
}
.pn-auth-tab {
    min-width: 112px;
    padding: 10px 14px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--pn-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}
.pn-auth-tab.is-active {
    background: #fff;
    color: var(--pn-ink);
    box-shadow: 0 5px 16px rgba(26, 23, 34, .08);
}

.pn-auth-view { display: none; }
.pn-auth-view.is-active { display: block; }
.pn-auth-view > h2 {
    margin: 8px 0 8px;
    color: var(--pn-ink);
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1;
    letter-spacing: -.05em;
}
.pn-auth-view > p {
    margin: 0 0 24px;
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.55;
}
.pn-auth-form {
    display: grid;
    gap: 14px;
}
.pn-auth-form .pn-field > small {
    display: block;
    margin-top: 6px;
    color: var(--pn-faint);
    font-size: 10px;
    line-height: 1.4;
}
.pn-auth-form .pn-btn { width: 100%; }
.pn-check-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--pn-muted);
    font-size: 11px;
    line-height: 1.45;
}
.pn-check-row input { margin-top: 2px; accent-color: var(--pn-primary); }
.pn-auth-links {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.pn-auth-links button,
.pn-auth-back {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pn-primary-deep);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}
.pn-auth-back { margin-bottom: 24px; }

.pn-register-methods {
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 13px;
    background: var(--pn-surface-soft);
}
.pn-register-methods button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pn-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}
.pn-register-methods button.is-active {
    background: white;
    color: var(--pn-ink);
    box-shadow: 0 4px 14px rgba(24, 21, 31, .07);
}
.pn-phone-field[hidden] { display: none !important; }

.pn-auth-plans {
    margin: 4px 0 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.pn-auth-plan {
    position: relative;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: #fff;
    color: var(--pn-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pn-auth-plan:hover { transform: translateY(-2px); }
.pn-auth-plan.is-selected {
    border-color: rgba(255,61,110,.72);
    box-shadow: 0 0 0 3px rgba(255,61,110,.08), 0 14px 34px rgba(38, 29, 48, .1);
}
.pn-plan-popular,
.pn-current-plan {
    width: fit-content;
    margin-bottom: 10px;
    padding: 5px 8px;
    display: block;
    border-radius: 999px;
    background: var(--pn-primary-soft);
    color: var(--pn-primary-deep);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
}
.pn-auth-plan-head { display: block; }
.pn-auth-plan-head > strong { display: block; font-size: 17px; }
.pn-auth-plan-head > span { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.pn-auth-plan-head b { font-size: 22px; letter-spacing: -.04em; }
.pn-auth-plan-head small { color: var(--pn-faint); font-size: 9px; }
.pn-auth-plan-tagline { display: block; min-height: 34px; margin-top: 8px; color: var(--pn-muted); line-height: 1.4; }
.pn-auth-plan ul,
.pn-membership-card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.pn-auth-plan li,
.pn-membership-card li {
    margin: 7px 0;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    color: #646672;
    font-size: 9px;
    line-height: 1.35;
}
.pn-auth-plan li .pn-icon-svg,
.pn-membership-card li .pn-icon-svg { width: 13px; height: 13px; color: var(--pn-success); }

/* In-app membership comparison */
.pn-membership-intro { padding: 22px 22px 8px; }
.pn-membership-intro h2 { margin: 5px 0 10px; font-size: 30px; letter-spacing: -.04em; }
.pn-membership-intro p { margin: 0; color: var(--pn-muted); font-size: 12px; line-height: 1.55; }
.pn-membership-grid {
    padding: 14px 18px 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.pn-membership-card {
    position: relative;
    padding: 20px;
    border: 1px solid var(--pn-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--pn-shadow-sm);
}
.pn-membership-card.is-featured { border-color: rgba(255,61,110,.35); }
.pn-membership-card.is-current { box-shadow: 0 0 0 3px rgba(23,166,115,.08), var(--pn-shadow-sm); }
.pn-membership-card h3 { margin: 0; font-size: 22px; }
.pn-membership-card > p { min-height: 38px; color: var(--pn-muted); font-size: 11px; line-height: 1.45; }
.pn-membership-card .pn-price-line { margin: 14px 0 8px; }
.pn-membership-card .pn-price-line strong { color: var(--pn-ink); font-size: 32px; }
.pn-membership-card .pn-price-line span { color: var(--pn-faint); font-size: 10px; }
.pn-membership-card ul { min-height: 130px; }
.pn-membership-card .pn-btn { width: 100%; margin-top: 14px; }

@media (max-width: 900px) {
    .pn-auth-shell { grid-template-columns: 1fr; }
    .pn-auth-story { display: none; }
    .pn-auth-main { max-height: 92vh; }
    .pn-auth-plans,
    .pn-membership-grid { grid-template-columns: 1fr; }
    .pn-auth-plan-tagline,
    .pn-membership-card > p,
    .pn-membership-card ul { min-height: 0; }
}

@media (max-width: 620px) {
    .pn-auth-overlay { padding: 0; align-items: flex-end; }
    .pn-auth-shell { width: 100%; max-height: 96svh; border-radius: 26px 26px 0 0; }
    .pn-auth-main { max-height: 96svh; padding: 28px 18px max(28px, calc(env(safe-area-inset-bottom) + 18px)); }
    .pn-auth-close { top: 12px; right: 12px; }
    .pn-auth-tabs { margin-bottom: 25px; }
    .pn-auth-tab { min-width: 100px; }
    .pn-auth-view > h2 { font-size: 33px; }
    .pn-auth-plans { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; }
    .pn-auth-plan { flex: 0 0 82%; scroll-snap-align: center; }
    .pn-auth-links { align-items: flex-start; }
}

.pn-field > small {
    display: block;
    margin-top: 6px;
    color: var(--pn-faint);
    font-size: 10px;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .pn-auth-shell *, .pn-auth-shell *:before, .pn-auth-shell *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Connection-state discovery, safety actions and pinned chats (v2.2) */
.pn-nearby-card.has-incoming {
    min-height: 0;
    max-height: 680px;
    overflow-y: auto;
}

.pn-incoming-nearby-section {
    padding-bottom: 4px;
}

.pn-incoming-nearby-heading {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--pn-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pn-incoming-nearby-heading small {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--pn-primary-soft);
    color: var(--pn-primary-deep);
    font-size: 9px;
}

.pn-incoming-nearby-list {
    display: grid;
    gap: 9px;
}

.pn-incoming-nearby-card {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255, 61, 110, .2);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff8fb, #fff);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: var(--pn-ink);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pn-incoming-nearby-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 61, 110, .38);
    box-shadow: var(--pn-shadow-sm);
}

.pn-incoming-avatar {
    width: 48px;
    height: 48px;
    position: relative;
    border-radius: 15px;
    background-position: center;
    background-size: cover;
    background-color: #ececf1;
}

.pn-incoming-avatar i {
    width: 22px;
    height: 22px;
    position: absolute;
    right: -5px;
    bottom: -5px;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--pn-primary);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-style: normal;
}

.pn-incoming-copy {
    min-width: 0;
}

.pn-incoming-copy strong,
.pn-incoming-copy small {
    display: block;
}

.pn-incoming-copy strong {
    overflow: hidden;
    color: var(--pn-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 850;
}

.pn-incoming-copy small {
    margin-top: 4px;
    color: var(--pn-muted);
    font-size: 10px;
}

.pn-incoming-reply {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--pn-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 850;
}

.pn-nearby-divider {
    margin: 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pn-faint);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pn-nearby-divider:before,
.pn-nearby-divider:after {
    content: "";
    height: 1px;
    background: var(--pn-line);
    flex: 1;
}

.pn-incoming-marker > div {
    border-color: var(--pn-primary) !important;
    box-shadow: 0 0 0 5px rgba(255, 61, 110, .16), 0 8px 20px rgba(35, 30, 45, .2) !important;
}

.pn-marker-nudge {
    width: 22px;
    height: 22px;
    position: absolute;
    right: -7px;
    bottom: -5px;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--pn-primary);
    display: grid;
    place-items: center;
    font-size: 11px;
}

.pn-map-nudge-card .pn-map-meta {
    color: var(--pn-primary-deep);
    font-weight: 750;
}

.pn-hotspot-nudged {
    border-color: rgba(255, 61, 110, .22);
    background: #fff8fb;
    text-align: left;
}

.pn-conv-item.is-pinned {
    border-color: rgba(255, 61, 110, .2);
    background: linear-gradient(145deg, #fff9fb, #fff);
}

.pn-conv-tail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.pn-conv-pin {
    color: var(--pn-primary);
    display: inline-flex;
}

.pn-conv-pin .pn-icon-svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.pn-chat-pin.is-pinned {
    background: var(--pn-primary-soft);
    color: var(--pn-primary-deep);
}

.pn-chat-pin.is-pinned .pn-icon-svg {
    fill: currentColor;
}

.pn-connection-actions-sheet {
    text-align: center;
}

.pn-connection-actions-sheet h2 span {
    display: inline;
}

.pn-connection-action-list {
    margin-top: 20px;
    display: grid;
    gap: 9px;
    text-align: left;
}

.pn-connection-action {
    width: 100%;
    min-height: 68px;
    padding: 11px 12px;
    border: 1px solid var(--pn-line);
    border-radius: 17px;
    background: white;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    color: var(--pn-ink);
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.pn-connection-action:hover {
    transform: translateY(-1px);
    border-color: #d8d8e2;
    background: #fbfbfd;
}

.pn-connection-action > span:nth-child(2) {
    min-width: 0;
}

.pn-connection-action strong,
.pn-connection-action small {
    display: block;
}

.pn-connection-action strong {
    font-size: 13px;
    font-weight: 850;
}

.pn-connection-action small {
    margin-top: 3px;
    color: var(--pn-muted);
    font-size: 10px;
    line-height: 1.4;
}

.pn-connection-action > i {
    color: var(--pn-faint);
    font-size: 22px;
    font-style: normal;
}

.pn-action-glyph,
.pn-confirm-symbol {
    border-radius: 13px;
    background: var(--pn-surface-soft);
    color: var(--pn-ink);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.pn-action-glyph {
    width: 38px;
    height: 38px;
    font-size: 17px;
}

.pn-connection-action.is-danger {
    border-color: rgba(217, 54, 93, .16);
}

.pn-connection-action.is-danger .pn-action-glyph,
.pn-connection-action.is-danger strong {
    color: var(--pn-danger);
}

.pn-confirm-symbol {
    width: 62px;
    height: 62px;
    margin: 2px auto 20px;
    background: var(--pn-primary-soft);
    color: var(--pn-primary-deep);
    font-size: 28px;
}

.pn-btn-danger,
.pn-btn-danger:hover {
    background: linear-gradient(145deg, var(--pn-danger), #ef5575) !important;
    color: white !important;
    box-shadow: 0 11px 25px rgba(217, 54, 93, .22) !important;
}

.pn-report-sheet {
    max-height: min(92vh, 760px);
    overflow-y: auto;
    text-align: left;
}

.pn-report-sheet > .pn-eyebrow,
.pn-report-sheet > h2,
.pn-report-sheet > p {
    text-align: center;
}

.pn-report-field {
    margin-top: 14px;
}

.pn-report-field select,
.pn-report-field textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--pn-line);
    border-radius: 14px;
    background: white;
    color: var(--pn-ink);
    box-shadow: none;
    outline: none;
    font: inherit;
}

.pn-report-field select {
    min-height: 48px;
}

.pn-report-field textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}

.pn-report-field select:focus,
.pn-report-field textarea:focus {
    border-color: rgba(255, 61, 110, .5);
    box-shadow: 0 0 0 4px rgba(255, 61, 110, .08);
}

.pn-report-privacy {
    margin: 14px 0 18px;
    padding: 11px 12px;
    border-radius: 13px;
    background: var(--pn-surface-soft);
    color: var(--pn-muted);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
    line-height: 1.45;
}

.pn-report-privacy .pn-icon-svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--pn-success);
}

@media (max-width: 720px) {
    .pn-nearby-card.has-incoming {
        max-height: none;
    }

    .pn-incoming-nearby-card {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .pn-connection-actions-sheet,
    .pn-confirm-sheet,
    .pn-report-sheet {
        max-height: 92svh;
    }
}
.pn-incoming-marker > div {
    position: relative;
}


/* Discover Mode reminder shown to returning, currently undiscoverable members. */
.pn-walk-reminder-overlay {
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 61, 110, .24), transparent 36%),
        rgba(18, 16, 24, .66);
}

.pn-walk-reminder-card {
    width: min(100%, 470px);
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 30px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 32px 90px rgba(26, 18, 35, .34);
    text-align: center;
    animation: pnModalIn .24s ease both;
}

.pn-walk-reminder-card h2 {
    margin: 8px auto 0;
    max-width: 390px;
    color: var(--pn-ink);
    font-size: clamp(29px, 5vw, 38px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.pn-walk-reminder-card > p {
    margin: 14px auto 20px;
    max-width: 390px;
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.6;
}

.pn-walk-reminder-visual {
    width: 154px;
    height: 154px;
    margin: 0 auto 22px;
    position: relative;
    display: grid;
    place-items: center;
}

.pn-walk-reminder-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 61, 110, .18);
    border-radius: 50%;
    animation: pnReminderPulse 2.6s ease-out infinite;
}

.pn-walk-reminder-ring-two {
    inset: 18px;
    animation-delay: .7s;
}

.pn-walk-reminder-icon {
    width: 86px;
    height: 86px;
    position: relative;
    z-index: 2;
    border: 8px solid rgba(255, 255, 255, .92);
    border-radius: 30px;
    background: linear-gradient(145deg, var(--pn-primary), #ff7a58);
    color: white;
    display: grid;
    place-items: center;
    box-shadow: 0 18px 38px rgba(255, 61, 110, .28);
    transform: rotate(-4deg);
}

.pn-walk-reminder-icon .pn-icon-svg {
    width: 38px;
    height: 38px;
}

.pn-walk-reminder-live {
    position: absolute;
    z-index: 3;
    right: -7px;
    bottom: 10px;
    padding: 8px 11px;
    border: 4px solid white;
    border-radius: 999px;
    background: #15131a;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 24px rgba(20, 18, 25, .2);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.pn-walk-reminder-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pn-success);
    box-shadow: 0 0 0 4px rgba(47, 190, 138, .16);
}

.pn-walk-reminder-points {
    margin: 0 0 18px;
    padding: 14px;
    border-radius: 18px;
    background: var(--pn-surface-soft);
    display: grid;
    gap: 10px;
    text-align: left;
}

.pn-walk-reminder-points span {
    color: var(--pn-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.pn-walk-reminder-points strong {
    color: var(--pn-ink);
    font-weight: 800;
}

.pn-walk-reminder-points .pn-icon-svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--pn-primary);
}

.pn-walk-reminder-card > .pn-btn {
    width: 100%;
}

.pn-walk-reminder-card > .pn-text-button {
    margin-top: 15px;
}

.pn-walk-reminder-card .pn-form-message:not(:empty) {
    margin: -4px 0 14px;
}

@keyframes pnReminderPulse {
    0% { opacity: .7; transform: scale(.78); }
    70%, 100% { opacity: 0; transform: scale(1.12); }
}

@media (max-width: 720px) {
    .pn-walk-reminder-overlay {
        padding: 14px;
        align-items: center;
    }

    .pn-walk-reminder-card {
        width: 100%;
        padding: 26px 20px max(24px, calc(env(safe-area-inset-bottom) + 18px));
        border-radius: 28px;
    }

    .pn-walk-reminder-visual {
        width: 138px;
        height: 138px;
        margin-bottom: 17px;
    }
}

/* ========================================================================== 
   Nudjee 2.4 — multi-intent landing, live mode and credit economy
   ========================================================================== */

.pn-landing {
    --pn-landing-ink: #f8f7fb;
    --pn-landing-muted: rgba(245, 241, 250, .68);
    --pn-landing-line: rgba(255, 255, 255, .11);
    --pn-business: #29b7a8;
    --pn-business-deep: #0d716d;
    --pn-platonic: #7c6cff;
    --pn-romance: #ff3d6e;
    width: min(calc(100% - 32px), 1320px);
    max-width: 1320px;
    min-height: 0;
    margin: 18px auto 42px;
    padding: 0 0 28px;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 36px;
    color: var(--pn-landing-ink);
    background:
        radial-gradient(circle at 10% 4%, rgba(255, 61, 110, .21), transparent 28%),
        radial-gradient(circle at 94% 22%, rgba(41, 183, 168, .17), transparent 30%),
        radial-gradient(circle at 48% 72%, rgba(124, 108, 255, .1), transparent 34%),
        linear-gradient(148deg, #151119 0%, #10131b 52%, #0b1217 100%);
    box-shadow: 0 40px 110px rgba(14, 12, 20, .26);
    isolation: isolate;
}

.pn-landing .pn-guest-glow {
    pointer-events: none;
}

.pn-landing-nav {
    position: relative;
    z-index: 5;
    min-height: 78px;
    padding: 14px 30px;
    border-bottom: 1px solid var(--pn-landing-line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    background: rgba(13, 13, 19, .52);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.pn-landing-brand {
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    width: fit-content;
}

.pn-landing-brand > span:last-child {
    display: grid;
    gap: 1px;
}

.pn-landing-brand strong {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.pn-landing-brand small {
    color: var(--pn-landing-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pn-landing-nav > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.pn-landing-nav > div a {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s ease;
}

.pn-landing-nav > div a:hover {
    color: white;
}

.pn-landing-nav > .pn-btn {
    justify-self: end;
    color: white;
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
}

.pn-landing-hero {
    position: relative;
    z-index: 2;
    min-height: 670px;
    padding: 78px clamp(30px, 6vw, 88px) 68px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
}

.pn-landing-copy {
    max-width: 690px;
}

.pn-landing .pn-eyebrow {
    color: #ff8ca8;
    letter-spacing: .13em;
}

.pn-landing-copy h1 {
    margin: 15px 0 22px;
    color: white;
    font-size: clamp(44px, 5.2vw, 76px);
    line-height: .99;
    letter-spacing: -.058em;
    font-weight: 890;
    text-wrap: balance;
}

.pn-landing-copy > p {
    max-width: 650px;
    margin: 0;
    color: var(--pn-landing-muted);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.68;
}

.pn-landing .pn-guest-actions {
    margin-top: 31px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pn-landing .pn-guest-actions .pn-btn {
    min-height: 54px;
    padding-inline: 23px;
}

.pn-landing .pn-guest-actions .pn-btn-secondary {
    color: white;
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
}

.pn-landing-proof {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
}

.pn-landing-proof span {
    color: rgba(255,255,255,.66);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 750;
}

.pn-landing-proof .pn-icon-svg {
    width: 16px;
    height: 16px;
    color: #ff7f9f;
}

.pn-landing-device {
    position: relative;
    width: min(100%, 410px);
    min-height: 548px;
    justify-self: center;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 43px;
    background: linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
    box-shadow: 0 38px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18);
    transform: rotate(2.3deg);
    overflow: hidden;
}

.pn-landing-device::before {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: -1;
    border-radius: 35px;
    background: linear-gradient(180deg, #f9fafc, #eceff4);
}

.pn-device-top {
    min-height: 54px;
    padding: 8px 8px 8px 5px;
    color: #191820;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 850;
}

.pn-device-top > span:nth-child(2) {
    margin-left: auto;
}

.pn-device-top i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1ec58e;
    box-shadow: 0 0 0 5px rgba(30,197,142,.14);
}

.pn-device-mode {
    margin: 6px 3px 10px;
    padding: 4px;
    border-radius: 14px;
    background: #e8eaf0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.pn-device-mode span {
    padding: 9px 4px;
    border-radius: 10px;
    color: #777986;
    text-align: center;
    font-size: 9px;
    font-weight: 850;
}

.pn-device-mode .is-active {
    color: white;
    background: linear-gradient(135deg, #17a89d, #08716e);
    box-shadow: 0 8px 16px rgba(10,118,112,.2);
}

.pn-device-radar {
    position: relative;
    height: 300px;
    margin: 0 3px;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)),
        repeating-linear-gradient(0deg, transparent 0 32px, rgba(45,69,74,.075) 33px),
        repeating-linear-gradient(90deg, transparent 0 32px, rgba(45,69,74,.075) 33px),
        linear-gradient(140deg, #dce9e7, #cbd9dd);
}

.pn-radar-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(18,131,124,.22);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.pn-radar-ring.r1 { width: 92px; height: 92px; }
.pn-radar-ring.r2 { width: 180px; height: 180px; }
.pn-radar-ring.r3 { width: 282px; height: 282px; }

.pn-radar-you,
.pn-radar-person {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(20,32,39,.23);
}

.pn-radar-you {
    width: 44px;
    height: 44px;
    left: calc(50% - 22px);
    top: calc(50% - 22px);
    border: 4px solid rgba(255,255,255,.88);
    background: linear-gradient(145deg, #ff3d6e, #f67554);
}

.pn-radar-person {
    width: 36px;
    height: 36px;
    border: 3px solid white;
    background: linear-gradient(145deg, #1db9aa, #117773);
}

.pn-radar-person.p1 { top: 47px; right: 64px; }
.pn-radar-person.p2 { left: 45px; bottom: 48px; background: linear-gradient(145deg, #7c6cff, #5645c8); }

.pn-device-card {
    position: relative;
    margin: -25px 14px 0;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 15px 38px rgba(31,39,46,.18);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.pn-device-avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: white;
    background: linear-gradient(145deg, #2bb9a9, #0b7771);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.pn-device-card > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-device-card strong {
    color: #202127;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-device-card small {
    color: #81838e;
    font-size: 8px;
}

.pn-device-card button {
    padding: 8px 9px;
    border: 0;
    border-radius: 10px;
    color: white;
    background: #13877f;
    font-size: 8px;
    font-weight: 900;
}

.pn-device-note {
    margin: 14px 10px 3px;
    color: #646773;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
}

.pn-device-note .pn-icon-svg { width: 15px; height: 15px; color: #13877f; }

.pn-landing-section {
    position: relative;
    z-index: 2;
    margin-inline: clamp(20px, 4vw, 56px);
    padding: clamp(54px, 7vw, 92px) clamp(24px, 5vw, 68px);
    border-top: 1px solid var(--pn-landing-line);
}

.pn-how-strip {
    padding-block: 26px;
    border: 1px solid var(--pn-landing-line);
    border-radius: 26px;
    background: rgba(255,255,255,.045);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.pn-how-strip > div {
    min-height: 92px;
    padding: 8px 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
}

.pn-how-strip > div + div { border-left: 1px solid var(--pn-landing-line); }
.pn-how-strip span { grid-row: 1 / 3; color: rgba(255,255,255,.22); font-size: 31px; font-weight: 900; letter-spacing: -.05em; }
.pn-how-strip strong { color: white; font-size: 13px; }
.pn-how-strip small { margin-top: 5px; color: var(--pn-landing-muted); font-size: 10px; line-height: 1.5; }

.pn-landing-section-head {
    max-width: 790px;
    margin: 0 auto 38px;
    text-align: center;
}

.pn-landing-section h2,
.pn-token-copy h2,
.pn-audience-section h2 {
    margin: 12px 0 16px;
    color: white;
    font-size: clamp(31px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.pn-landing-section-head p,
.pn-token-copy > p,
.pn-audience-section > div:first-child > p {
    margin: 0;
    color: var(--pn-landing-muted);
    font-size: 15px;
    line-height: 1.7;
}

.pn-mode-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pn-mode-story {
    position: relative;
    min-height: 390px;
    padding: 29px;
    overflow: hidden;
    border: 1px solid var(--pn-landing-line);
    border-radius: 28px;
    background: rgba(255,255,255,.045);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.pn-mode-story::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -75px;
    bottom: -80px;
    border-radius: 50%;
    background: currentColor;
    opacity: .08;
    filter: blur(5px);
}

.pn-mode-story:hover {
    transform: translateY(-7px);
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.07);
}

.pn-mode-story.is-romance { color: var(--pn-romance); }
.pn-mode-story.is-platonic { color: #9588ff; }
.pn-mode-story.is-business { color: #40c8ba; }

.pn-mode-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 40px;
    border: 1px solid currentColor;
    border-radius: 19px;
    background: rgba(255,255,255,.055);
    display: grid;
    place-items: center;
}

.pn-mode-icon .pn-icon-svg { width: 26px; height: 26px; }
.pn-mode-story > small { font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.pn-mode-story h3 { margin: 10px 0 12px; color: white; font-size: 25px; line-height: 1.1; letter-spacing: -.035em; }
.pn-mode-story p { margin: 0; color: var(--pn-landing-muted); font-size: 13px; line-height: 1.65; }
.pn-mode-story ul { margin: 23px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pn-mode-story li { color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; }
.pn-mode-story li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.pn-audience-section,
.pn-token-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
    align-items: center;
    gap: clamp(38px, 7vw, 92px);
}

.pn-audience-visual {
    padding: 24px;
    border: 1px solid var(--pn-landing-line);
    border-radius: 28px;
    background: rgba(255,255,255,.045);
    display: grid;
    gap: 14px;
}

.pn-audience-visual > div {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,.055);
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 10px;
}

.pn-audience-visual span {
    width: 43px;
    height: 43px;
    border: 3px solid rgba(255,255,255,.72);
    border-radius: 50%;
    color: white;
    background: linear-gradient(145deg, #ff6b91, #d9265a);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.pn-audience-visual span:nth-child(2) { margin-left: -19px; background: linear-gradient(145deg, #927cff, #5949c8); }
.pn-audience-visual strong { margin-left: 8px; color: #75dfbd; font-size: 11px; }
.pn-audience-visual .is-locked strong { color: rgba(255,255,255,.56); }

.pn-token-section {
    border: 1px solid rgba(64,200,186,.18);
    border-radius: 31px;
    background: linear-gradient(145deg, rgba(26,153,143,.11), rgba(255,255,255,.025));
}

.pn-token-flow {
    margin-top: 27px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.pn-token-flow span {
    padding: 10px 13px;
    border: 1px solid rgba(64,200,186,.19);
    border-radius: 999px;
    color: #a7e8df;
    background: rgba(24,154,144,.1);
    font-size: 9px;
    font-weight: 850;
}

.pn-token-flow i { color: rgba(255,255,255,.28); font-style: normal; }

.pn-credit-pack-preview {
    padding: 19px;
    border: 1px solid var(--pn-landing-line);
    border-radius: 28px;
    background: rgba(7,15,20,.38);
    display: grid;
    gap: 10px;
}

.pn-credit-pack-preview article {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
}

.pn-credit-pack-preview article > span {
    grid-row: 1 / 3;
    width: 41px;
    height: 41px;
    border-radius: 14px;
    color: #57d9ca;
    background: rgba(41,183,168,.12);
    display: grid;
    place-items: center;
}

.pn-credit-pack-preview article strong { color: white; font-size: 12px; }
.pn-credit-pack-preview article small { color: var(--pn-landing-muted); font-size: 9px; }
.pn-credit-pack-preview > p { margin: 6px 5px 0; color: rgba(255,255,255,.52); font-size: 9px; line-height: 1.5; text-align: center; }

.pn-landing-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 16px;
}

.pn-landing-plan {
    position: relative;
    padding: 28px;
    border: 1px solid var(--pn-landing-line);
    border-radius: 28px;
    background: rgba(255,255,255,.043);
    display: flex;
    flex-direction: column;
}

.pn-landing-plan.is-featured {
    border-color: rgba(255,93,133,.43);
    background: linear-gradient(160deg, rgba(255,61,110,.13), rgba(255,255,255,.045));
    box-shadow: 0 22px 55px rgba(255,61,110,.1);
}

.pn-plan-popular {
    width: fit-content;
    margin: -13px 0 15px;
    padding: 7px 10px;
    border-radius: 999px;
    color: white;
    background: var(--pn-primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
}

.pn-landing-plan h3 { margin: 0; color: white; font-size: 24px; }
.pn-landing-plan .pn-price-line { margin: 15px 0 12px; display: flex; align-items: baseline; gap: 6px; }
.pn-landing-plan .pn-price-line strong { color: white; font-size: 37px; letter-spacing: -.05em; }
.pn-landing-plan .pn-price-line span { color: var(--pn-landing-muted); font-size: 10px; }
.pn-landing-plan > p { min-height: 42px; margin: 0 0 18px; color: var(--pn-landing-muted); font-size: 11px; line-height: 1.6; }
.pn-landing-plan ul { margin: 0 0 25px; padding: 0; list-style: none; display: grid; gap: 11px; flex: 1; }
.pn-landing-plan li { color: rgba(255,255,255,.73); display: flex; gap: 8px; font-size: 10px; line-height: 1.45; }
.pn-landing-plan li .pn-icon-svg { width: 15px; height: 15px; color: #53d0a8; }
.pn-landing-plan .pn-btn-secondary { color: white; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }

.pn-landing-final {
    margin-bottom: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 31px;
    background:
        radial-gradient(circle at 80% 15%, rgba(41,183,168,.22), transparent 35%),
        radial-gradient(circle at 15% 90%, rgba(255,61,110,.24), transparent 38%),
        rgba(255,255,255,.04);
    text-align: center;
}

.pn-landing-final h2 { max-width: 760px; margin-inline: auto; }
.pn-landing-final p { max-width: 650px; margin: 0 auto 25px; color: var(--pn-landing-muted); line-height: 1.65; }

/* Live realm switcher */
.pn-app-shell {
    --pn-mode-accent: var(--pn-primary);
    --pn-mode-soft: rgba(255,61,110,.1);
}

#pn-app[data-connection-mode="platonic"] { --pn-mode-accent: #7462f5; --pn-mode-soft: rgba(116,98,245,.11); }
#pn-app[data-connection-mode="business"] { --pn-mode-accent: #119c92; --pn-mode-soft: rgba(17,156,146,.11); }

.pn-live-mode-bar {
    position: relative;
    z-index: 500;
    width: min(calc(100% - 28px), 930px);
    min-height: 66px;
    margin: 11px auto 0;
    padding: 8px 9px 8px 16px;
    border: 1px solid rgba(38,40,49,.08);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 11px 30px rgba(28,24,40,.09);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: minmax(105px, auto) 1fr auto;
    align-items: center;
    gap: 13px;
}

.pn-live-mode-label { display: grid; gap: 2px; }
.pn-live-mode-label span { color: var(--pn-muted); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.pn-live-mode-label strong { color: var(--pn-ink); font-size: 12px; }

.pn-live-mode-switch {
    padding: 4px;
    border-radius: 15px;
    background: #f0f1f5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.pn-live-mode-switch button {
    min-height: 38px;
    padding: 7px 11px;
    border: 0;
    border-radius: 12px;
    color: #7d7f89;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 850;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pn-live-mode-switch button:hover { color: var(--pn-ink); }
.pn-live-mode-switch button:disabled { opacity: .6; cursor: wait; }
.pn-live-mode-switch button.is-active { color: white; background: var(--pn-mode-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--pn-mode-accent) 25%, transparent); }
.pn-live-mode-switch .pn-icon-svg { width: 15px; height: 15px; }

.pn-wallet-chip {
    min-width: 88px;
    min-height: 45px;
    padding: 7px 11px;
    border: 1px solid rgba(17,156,146,.14);
    border-radius: 15px;
    color: #0f776f;
    background: rgba(17,156,146,.075);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.pn-wallet-chip > span { display: grid; text-align: left; }
.pn-wallet-chip strong { color: #115f59; font-size: 13px; line-height: 1; }
.pn-wallet-chip small { color: #668c88; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.pn-wallet-chip .pn-icon-svg { width: 18px; height: 18px; }

.pn-profile-mode-chip,
.pn-mode-photo-chip,
.pn-hotspot-mode {
    width: fit-content;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 850;
}

.pn-profile-mode-chip {
    margin: 10px auto 0;
    padding: 7px 10px;
    color: #d72b58;
    background: rgba(255,61,110,.09);
    font-size: 9px;
}

.pn-profile-mode-chip.is-platonic { color: #6353d3; background: rgba(116,98,245,.1); }
.pn-profile-mode-chip.is-business { color: #087c74; background: rgba(17,156,146,.1); }
.pn-profile-mode-chip .pn-icon-svg { width: 14px; height: 14px; }

.pn-mode-photo-chip {
    position: absolute;
    left: 13px;
    top: 13px;
    padding: 7px 10px;
    color: white;
    background: rgba(21,19,27,.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 8px;
}
.pn-mode-photo-chip .pn-icon-svg { width: 13px; height: 13px; }

.pn-nearby-person-card.is-business .pn-nearby-person-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3,71,68,.08), transparent 45%);
}

.pn-business-identity {
    margin: 13px 0 0;
    padding: 12px 13px;
    border: 1px solid rgba(17,156,146,.12);
    border-radius: 15px;
    background: rgba(17,156,146,.065);
    display: grid;
    gap: 5px;
}

.pn-business-identity strong { color: #146f68; font-size: 11px; }
.pn-business-identity small { color: #6b8582; display: flex; align-items: center; gap: 5px; font-size: 9px; }
.pn-business-identity .pn-icon-svg { width: 12px; height: 12px; }

.pn-profile-intro {
    margin: 13px 0 0;
    color: #656873;
    font-size: 11px;
    line-height: 1.55;
}

.pn-map-business-line {
    margin: 8px 0;
    color: #147a73;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}

/* Profile mode selection */
.pn-onboarding-mode-grid,
.pn-profile-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pn-mode-radio { display: block; cursor: pointer; }
.pn-mode-radio > input { position: absolute; opacity: 0; pointer-events: none; }
.pn-mode-radio > span {
    min-height: 128px;
    padding: 15px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: var(--pn-surface);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
    column-gap: 9px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.pn-mode-radio .pn-icon-svg { width: 21px; height: 21px; color: var(--pn-primary); }
.pn-mode-radio:nth-child(2) .pn-icon-svg { color: #7462f5; }
.pn-mode-radio:nth-child(3) .pn-icon-svg { color: #119c92; }
.pn-mode-radio strong { align-self: center; color: var(--pn-ink); font-size: 11px; }
.pn-mode-radio small { grid-column: 1 / 3; margin-top: 9px; color: var(--pn-muted); font-size: 8px; line-height: 1.5; }
.pn-mode-radio:hover > span { transform: translateY(-2px); border-color: #d7d7df; }
.pn-mode-radio > input:focus-visible + span { outline: 3px solid rgba(255,61,110,.16); outline-offset: 2px; }
.pn-mode-radio > input:checked + span { border-color: var(--pn-mode-accent); background: var(--pn-mode-soft); box-shadow: 0 10px 24px color-mix(in srgb, var(--pn-mode-accent) 12%, transparent); }

.pn-cross-mode-row {
    margin-top: 13px;
    border: 1px solid rgba(116,98,245,.13);
    border-radius: 17px;
    background: rgba(116,98,245,.055);
}

.pn-business-profile-fields {
    display: none;
    margin-top: 16px;
    padding: 18px;
    border: 1px solid rgba(17,156,146,.15);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(17,156,146,.07), rgba(17,156,146,.025));
}

.pn-business-profile-fields.is-active { display: block; animation: pnBusinessReveal .22s ease both; }

@keyframes pnBusinessReveal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.pn-business-profile-fields h3 { margin: 0 0 5px; color: #116e68; font-size: 15px; }
.pn-business-profile-fields > p { margin: 0 0 16px; color: #70817f; font-size: 9px; line-height: 1.55; }

.pn-business-goals {
    margin: 13px 0;
    padding: 14px;
    border: 1px solid rgba(17,156,146,.12);
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pn-business-goals legend { padding: 0 5px; color: #57716f; font-size: 9px; font-weight: 850; }
.pn-business-goals label { padding: 8px 10px; border-radius: 999px; color: #3e6764; background: white; font-size: 9px; font-weight: 700; }
.pn-business-goals input { accent-color: #119c92; }

.pn-business-cost-note {
    padding: 13px;
    border-radius: 16px;
    color: #0f766f;
    background: rgba(17,156,146,.09);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pn-business-cost-note > span { display: grid; gap: 3px; }
.pn-business-cost-note strong { font-size: 10px; }
.pn-business-cost-note small { color: #66827f; font-size: 8px; line-height: 1.45; }
.pn-business-cost-note .pn-icon-svg { width: 20px; height: 20px; }

/* Wallet and packs */
.pn-wallet-card {
    margin: 20px 0 27px;
    padding: 22px;
    border: 1px solid rgba(17,156,146,.15);
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 10%, rgba(17,156,146,.13), transparent 35%),
        linear-gradient(145deg, #f7fffd, #f6f8fb);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 22px;
}

.pn-wallet-balance { display: flex; align-items: center; gap: 13px; }
.pn-wallet-balance > span { width: 52px; height: 52px; border-radius: 18px; color: white; background: linear-gradient(145deg, #20b4a7, #0b756f); display: grid; place-items: center; box-shadow: 0 12px 25px rgba(15,130,123,.18); }
.pn-wallet-balance > span .pn-icon-svg { width: 25px; height: 25px; }
.pn-wallet-balance > div { display: grid; }
.pn-wallet-balance small { color: #5e8580; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.pn-wallet-balance strong { color: #183a37; font-size: 21px; letter-spacing: -.03em; }
.pn-wallet-balance p { margin: 4px 0 0; color: #75827f; font-size: 9px; }

.pn-wallet-economy { display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 8px; }
.pn-wallet-economy > span { padding: 12px; border: 1px solid rgba(17,156,146,.1); border-radius: 15px; background: rgba(255,255,255,.74); display: grid; text-align: center; }
.pn-wallet-economy strong { color: #11766f; font-size: 18px; }
.pn-wallet-economy small { color: #72817f; font-size: 7px; line-height: 1.35; }

.pn-credit-pack-grid {
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.pn-credit-pack-card {
    padding: 19px;
    border: 1px solid var(--pn-line);
    border-radius: 21px;
    background: white;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pn-credit-pack-card:hover { transform: translateY(-3px); border-color: rgba(17,156,146,.22); box-shadow: var(--pn-shadow-sm); }
.pn-credit-pack-icon { width: 42px; height: 42px; margin-bottom: 15px; border-radius: 14px; color: #10837b; background: rgba(17,156,146,.09); display: grid; place-items: center; }
.pn-credit-pack-icon .pn-icon-svg { width: 21px; height: 21px; }
.pn-credit-pack-card h3 { margin: 0 0 4px; font-size: 13px; }
.pn-credit-pack-card > strong { color: #11766f; font-size: 19px; }
.pn-credit-pack-card p { min-height: 42px; margin: 8px 0 16px; color: var(--pn-muted); font-size: 9px; line-height: 1.5; flex: 1; }

.pn-business-nudge-quote {
    margin: 17px 0;
    padding: 13px;
    border: 1px solid rgba(17,156,146,.14);
    border-radius: 17px;
    color: #0e7871;
    background: rgba(17,156,146,.075);
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
}
.pn-business-nudge-quote[hidden] { display: none !important; }
.pn-business-nudge-quote > span { width: 38px; height: 38px; border-radius: 13px; color: white; background: #119c92; display: grid; place-items: center; }
.pn-business-nudge-quote > div { display: grid; gap: 3px; }
.pn-business-nudge-quote strong { font-size: 11px; }
.pn-business-nudge-quote small { color: #67827f; font-size: 8px; }

/* Rich public and hotspot profiles */
.pn-public-business {
    max-width: 380px;
    margin: 15px auto;
    padding: 13px;
    border-radius: 16px;
    color: #176f69;
    background: rgba(17,156,146,.07);
    display: grid;
    gap: 6px;
    text-align: center;
}
.pn-public-business strong { font-size: 11px; }
.pn-public-business small { color: #6a8581; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 9px; }
.pn-public-business .pn-icon-svg { width: 12px; height: 12px; }
.pn-public-profile-intro { max-width: 420px; margin: 16px auto; color: #5f626d; font-size: 12px; line-height: 1.62; text-align: center; }
.pn-public-goals { margin-bottom: 10px; justify-content: center; }

.pn-hotspot-mode {
    margin-top: 5px;
    padding: 4px 7px;
    color: #6254d0;
    background: rgba(116,98,245,.08);
    font-size: 7px;
}
.pn-hotspot-card.is-business .pn-hotspot-mode { color: #0d7972; background: rgba(17,156,146,.08); }
.pn-hotspot-mode .pn-icon-svg { width: 11px; height: 11px; }
.pn-hotspot-business { margin-top: 4px; color: #19726c; font-size: 8px; font-weight: 750; }

@media (max-width: 980px) {
    .pn-landing-hero { grid-template-columns: 1fr; text-align: center; }
    .pn-landing-copy { margin-inline: auto; }
    .pn-landing-proof, .pn-landing .pn-guest-actions { justify-content: center; }
    .pn-landing-device { width: min(100%, 395px); }
    .pn-audience-section, .pn-token-section { grid-template-columns: 1fr; }
    .pn-mode-showcase, .pn-landing-plans { grid-template-columns: 1fr; }
    .pn-mode-story { min-height: 0; }
    .pn-how-strip { grid-template-columns: 1fr; }
    .pn-how-strip > div + div { border-left: 0; border-top: 1px solid var(--pn-landing-line); }
}

@media (max-width: 760px) {
    .pn-landing { width: 100%; margin: 0; border-radius: 0; border-inline: 0; }
    .pn-landing-nav { grid-template-columns: 1fr auto; min-height: 66px; padding: 10px 16px; }
    .pn-landing-nav > div { display: none; }
    .pn-landing-hero { min-height: 0; padding: 57px 20px 50px; gap: 42px; }
    .pn-landing-copy h1 { font-size: clamp(42px, 13vw, 59px); }
    .pn-landing-copy > p { font-size: 15px; }
    .pn-landing .pn-guest-actions { flex-direction: column; }
    .pn-landing .pn-guest-actions .pn-btn { width: 100%; }
    .pn-landing-proof { display: grid; grid-template-columns: 1fr 1fr; text-align: left; }
    .pn-landing-device { min-height: 500px; border-radius: 35px; transform: none; }
    .pn-device-radar { height: 267px; }
    .pn-landing-section { margin-inline: 13px; padding: 55px 18px; }
    .pn-how-strip { padding: 0; }
    .pn-how-strip > div { padding: 22px 18px; }
    .pn-mode-story { padding: 24px; }
    .pn-credit-pack-grid { grid-template-columns: 1fr; }

    .pn-live-mode-bar {
        width: calc(100% - 18px);
        margin-top: 7px;
        padding: 8px;
        grid-template-columns: 1fr auto;
        border-radius: 18px;
    }
    .pn-live-mode-label { display: none; }
    .pn-live-mode-switch { order: 1; }
    .pn-wallet-chip { order: 2; min-width: 69px; padding-inline: 8px; }
    .pn-live-mode-switch button { padding: 6px 8px; }
    .pn-live-mode-switch button span { display: none; }
    .pn-live-mode-switch .pn-icon-svg { width: 18px; height: 18px; }

    .pn-onboarding-mode-grid,
    .pn-profile-mode-grid { grid-template-columns: 1fr; }
    .pn-mode-radio > span { min-height: 0; grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
    .pn-mode-radio small { grid-column: 2; margin-top: 3px; }
    .pn-wallet-card { grid-template-columns: 1fr; }
    .pn-wallet-economy { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
    .pn-landing-proof { grid-template-columns: 1fr; }
    .pn-landing-section h2, .pn-token-copy h2, .pn-audience-section h2 { font-size: 34px; }
    .pn-device-card { margin-inline: 7px; }
    .pn-device-card button { padding-inline: 6px; }
    .pn-audience-visual { padding: 13px; }
    .pn-audience-visual > div { padding: 13px; }
    .pn-audience-visual strong { font-size: 9px; }
    .pn-wallet-economy { grid-template-columns: 1fr; }
}

.pn-wallet-transactions {
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid var(--pn-line);
    border-radius: 20px;
    background: white;
}

.pn-wallet-transaction {
    min-height: 66px;
    padding: 12px 15px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
}
.pn-wallet-transaction + .pn-wallet-transaction { border-top: 1px solid var(--pn-line); }
.pn-wallet-transaction-icon { width: 38px; height: 38px; border-radius: 13px; color: #10837b; background: rgba(17,156,146,.08); display: grid; place-items: center; }
.pn-wallet-transaction.is-debit .pn-wallet-transaction-icon { color: #d32f5b; background: rgba(255,61,110,.08); }
.pn-wallet-transaction-icon .pn-icon-svg { width: 18px; height: 18px; }
.pn-wallet-transaction > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.pn-wallet-transaction strong { color: var(--pn-ink); font-size: 10px; }
.pn-wallet-transaction small { color: var(--pn-muted); font-size: 8px; }
.pn-wallet-transaction > b { color: #12806f; font-size: 13px; }
.pn-wallet-transaction.is-debit > b { color: #d32f5b; }


/* 2.4.1 landing page readability and plan stat spacing fixes */
.pn-landing button.pn-btn,
.pn-landing button.pn-btn span,
.pn-landing button.pn-btn small {
    -webkit-text-fill-color: currentColor;
}

.pn-landing-nav > .pn-btn,
.pn-landing .pn-guest-actions .pn-btn-secondary,
.pn-landing-plan .pn-btn-secondary {
    color: #ffffff !important;
}

.pn-landing-nav > .pn-btn:hover,
.pn-landing .pn-guest-actions .pn-btn-secondary:hover,
.pn-landing-plan .pn-btn-secondary:hover {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.11);
}

.pn-landing-plan .pn-btn {
    width: 100%;
    justify-content: center;
    font-weight: 800;
}

.pn-plan-token-stat {
    margin: 4px 0 18px;
    padding: 16px 0 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pn-plan-token-stat strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.pn-plan-token-stat span {
    color: rgba(255,255,255,.78);
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .pn-plan-token-stat {
        gap: 6px;
    }

    .pn-plan-token-stat strong {
        font-size: 17px;
    }
}


/* 2.4.2 membership and credits modal spacing improvements */
#pn-hub-modal .pn-hub-shell {
    width: min(100%, 980px);
    max-height: min(90vh, 920px);
}

#pn-view-subscription {
    padding: 24px clamp(18px, 2.4vw, 28px) 34px;
}

#pn-view-subscription .pn-membership-intro {
    padding: 0 0 10px;
}

#pn-view-subscription .pn-membership-intro h2 {
    max-width: 760px;
    margin: 7px 0 12px;
    line-height: 1.08;
}

#pn-view-subscription .pn-membership-intro p {
    max-width: 760px;
}

#pn-view-subscription .pn-wallet-card {
    margin: 20px 0 32px;
}

#pn-view-subscription .pn-section-heading {
    margin: 0 2px 12px;
}

#pn-view-subscription .pn-credit-pack-grid,
#pn-view-subscription .pn-wallet-transactions {
    margin-bottom: 34px;
}

#pn-view-subscription .pn-membership-grid {
    padding: 2px 0 0;
    gap: 14px;
}

#pn-view-subscription .pn-credit-pack-card,
#pn-view-subscription .pn-membership-card {
    padding: 22px;
}

@media (max-width: 900px) {
    #pn-hub-modal .pn-hub-shell {
        width: min(100%, 760px);
    }

    #pn-view-subscription {
        padding: 20px 16px 28px;
    }
}

/* 2.4.3 hotspot recovery state */
.pn-hotspot-error {
    margin: 10px 0;
    padding: 34px 24px;
    border: 1px solid rgba(255, 61, 110, .14);
    border-radius: 22px;
    background: linear-gradient(145deg, #fff8fa, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pn-hotspot-error-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 18px;
    color: var(--pn-primary);
    background: var(--pn-primary-soft);
    display: grid;
    place-items: center;
}

.pn-hotspot-error-icon .pn-icon-svg {
    width: 24px;
    height: 24px;
}

.pn-hotspot-error strong {
    color: var(--pn-ink);
    font-size: 16px;
}

.pn-hotspot-error p {
    max-width: 430px;
    margin: 8px 0 18px;
    color: var(--pn-muted);
    font-size: 12px;
    line-height: 1.55;
}

.pn-hotspot-error .pn-btn {
    min-width: 170px;
}


/* 2.4.4 connection-realm indicators in chat feeds and headers */
.pn-conv-avatar {
    position: relative;
    overflow: visible;
}

.pn-conv-mode-icon,
.pn-chat-mode-badge {
    border: 2px solid #ffffff;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 5px 14px rgba(28, 24, 40, .18);
}

.pn-conv-mode-icon {
    width: 23px;
    height: 23px;
    position: absolute;
    right: -6px;
    bottom: -5px;
}

.pn-conv-mode-icon .pn-icon-svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
}

.pn-chat-mode-badge {
    width: 29px;
    height: 29px;
    margin-left: 2px;
    flex: 0 0 auto;
}

.pn-chat-mode-badge .pn-icon-svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.pn-conv-mode-icon.is-romance,
.pn-chat-mode-badge.is-romance {
    color: #ffffff;
    background: linear-gradient(145deg, #ff3d6e, #ff7080);
}

.pn-conv-mode-icon.is-platonic,
.pn-chat-mode-badge.is-platonic {
    color: #ffffff;
    background: linear-gradient(145deg, #725cff, #9a78ff);
}

.pn-conv-mode-icon.is-business,
.pn-chat-mode-badge.is-business {
    color: #ffffff;
    background: linear-gradient(145deg, #159f96, #08736e);
}

@media (max-width: 420px) {
    .pn-chat-mode-badge {
        width: 26px;
        height: 26px;
    }
}

/* 2.5.0 chat presence and richer member profiles */
.pn-chat-header-avatar-wrap {
    width: 43px;
    height: 43px;
    position: relative;
    flex: 0 0 auto;
    display: block !important;
}

.pn-chat-header-avatar-wrap img {
    width: 100%;
    height: 100%;
}

.pn-chat-person-copy {
    min-width: 0;
    display: flex !important;
    flex-direction: column;
}

.pn-chat-online-dot {
    width: 12px;
    height: 12px;
    position: absolute;
    right: -3px;
    bottom: -2px;
    z-index: 3;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #22b573;
    box-shadow: 0 3px 10px rgba(34, 181, 115, .34);
}

.pn-chat-online-dot[hidden] {
    display: none !important;
}

.pn-conv-online-dot {
    right: -4px;
    top: -4px;
    bottom: auto;
}

.pn-conv-activity {
    margin-top: 4px;
    display: block;
    color: var(--pn-faint);
    font-size: 9px;
    line-height: 1.25;
}

.pn-conv-activity.is-online,
.pn-chat-activity.is-online {
    color: #17875e;
    font-weight: 800;
}

.pn-chat-activity {
    margin-top: 1px !important;
    color: var(--pn-faint) !important;
    font-size: 9px !important;
}

.pn-chat-activity.is-online {
    color: #17875e !important;
}

.pn-rich-profile-card,
.pn-favourites-grid,
.pn-prompt-editor {
    display: grid;
    gap: 18px;
}

.pn-mode-intention-grid,
.pn-favourites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pn-favourites-grid .pn-full-field {
    grid-column: 1 / -1;
}

.pn-subsection-label {
    margin-top: 2px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pn-subsection-label strong {
    color: var(--pn-ink);
    font-size: 11px;
}

.pn-subsection-label small {
    color: var(--pn-faint);
    font-size: 9px;
}

.pn-inline-editor-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.pn-prompt-edit-card {
    padding: 16px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #fafafd);
    display: grid;
    gap: 12px;
}

.pn-profile-sheet {
    width: min(100%, 650px);
    text-align: center;
}

.pn-public-intention {
    width: fit-content;
    margin: 12px auto 0;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--pn-primary-deep);
    background: var(--pn-primary-soft);
    font-size: 10px;
    font-weight: 850;
}

.pn-public-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--pn-line);
    text-align: left;
}

.pn-public-section h3 {
    margin: 0 0 12px;
    color: var(--pn-ink);
    font-size: 13px;
    letter-spacing: -.01em;
}

.pn-public-detail-grid,
.pn-public-favourites {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.pn-public-detail,
.pn-public-favourite {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--pn-line);
    border-radius: 15px;
    background: #fafafd;
    display: grid;
    gap: 4px;
}

.pn-public-detail small,
.pn-public-favourite small,
.pn-public-language-row > small,
.pn-public-prompt small {
    color: var(--pn-faint);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pn-public-detail strong,
.pn-public-favourite strong {
    color: var(--pn-ink);
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.pn-public-language-row {
    margin-top: 13px;
    display: grid;
    gap: 8px;
}

.pn-public-prompt-grid {
    display: grid;
    gap: 10px;
}

.pn-public-prompt {
    margin: 0;
    padding: 15px;
    border: 1px solid rgba(255, 61, 110, .12);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff8fb, #fff);
}

.pn-public-prompt p {
    margin: 6px 0 0;
    color: var(--pn-ink);
    font-size: 12px;
    line-height: 1.55;
}

.pn-public-qualities {
    justify-content: center;
}

.pn-quality-tag {
    color: #6b50cc;
    background: rgba(116, 98, 245, .09);
}

@media (max-width: 620px) {
    .pn-mode-intention-grid,
    .pn-favourites-grid,
    .pn-public-detail-grid,
    .pn-public-favourites {
        grid-template-columns: 1fr;
    }

    .pn-inline-editor-list {
        grid-template-columns: 1fr;
    }

    .pn-profile-sheet {
        width: 100%;
    }
}

.pn-lifestyle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 760px) {
    .pn-lifestyle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .pn-lifestyle-grid {
        grid-template-columns: 1fr;
    }
}

/* 2.6.0 enabled connection realms, View All and map realm badges */
#pn-app[data-connection-mode="all"] {
    --pn-mode-accent: #30323c;
    --pn-mode-soft: rgba(48,50,60,.09);
}

.pn-live-mode-switch {
    grid-template-columns: repeat(var(--pn-live-mode-count, 4), minmax(0, 1fr));
}

.pn-live-mode-switch button.is-unavailable {
    opacity: .38;
    cursor: not-allowed;
    box-shadow: none;
}

.pn-live-mode-switch button.is-unavailable:hover {
    color: #7d7f89;
    transform: none;
}

.pn-enabled-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pn-enabled-mode-card {
    min-width: 0;
    min-height: 112px;
    padding: 15px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: #fff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.pn-enabled-mode-card:hover {
    transform: translateY(-2px);
    border-color: #d8d9e1;
}

.pn-enabled-mode-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #d92c59;
    background: rgba(255,61,110,.09);
    display: grid;
    place-items: center;
}

.pn-enabled-mode-card.is-platonic .pn-enabled-mode-icon {
    color: #6554df;
    background: rgba(116,98,245,.1);
}

.pn-enabled-mode-card.is-business .pn-enabled-mode-icon {
    color: #0f8178;
    background: rgba(17,156,146,.1);
}

.pn-enabled-mode-icon .pn-icon-svg {
    width: 18px;
    height: 18px;
}

.pn-enabled-mode-card .pn-setting-copy {
    min-width: 0;
}

.pn-enabled-mode-card .pn-setting-copy strong,
.pn-enabled-mode-card .pn-setting-copy small {
    display: block;
}

.pn-enabled-mode-card .pn-setting-copy strong {
    margin-bottom: 5px;
    color: var(--pn-ink);
    font-size: 11px;
}

.pn-enabled-mode-card .pn-setting-copy small {
    color: var(--pn-muted);
    font-size: 8px;
    line-height: 1.45;
}

.pn-enabled-mode-card .pn-switch {
    margin-top: 2px;
}

.pn-mode-setting-note {
    margin: 13px 0 18px;
    padding: 12px 13px;
    border: 1px solid rgba(48,50,60,.08);
    border-radius: 15px;
    color: #666974;
    background: #f7f7fa;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 9px;
    line-height: 1.5;
}

.pn-mode-setting-note .pn-icon-svg {
    width: 17px;
    height: 17px;
    color: #555966;
}

.pn-current-mode-heading {
    margin: 0 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
}

.pn-current-mode-heading strong {
    color: var(--pn-ink);
    font-size: 11px;
}

.pn-current-mode-heading small {
    color: var(--pn-faint);
    font-size: 8px;
    text-align: right;
}

.pn-mode-radio.is-disabled {
    cursor: not-allowed;
}

.pn-mode-radio.is-disabled > span {
    opacity: .42;
    background: #f7f7f9;
}

.pn-mode-radio.is-disabled:hover > span {
    transform: none;
    border-color: var(--pn-line);
}

.pn-face-marker > div,
.pn-me-marker > div {
    position: relative;
}

.pn-marker-mode {
    width: 23px;
    height: 23px;
    position: absolute;
    left: -8px;
    top: -8px;
    border: 3px solid white;
    border-radius: 50%;
    color: white;
    background: var(--pn-primary);
    display: grid;
    place-items: center;
    box-shadow: 0 5px 13px rgba(24,23,31,.24);
}

.pn-marker-mode.is-platonic {
    background: #7462f5;
}

.pn-marker-mode.is-business {
    background: #119c92;
}

.pn-marker-mode .pn-icon-svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.25;
}

@media (max-width: 760px) {
    .pn-enabled-mode-grid {
        grid-template-columns: 1fr;
    }

    .pn-enabled-mode-card {
        min-height: 0;
    }

    .pn-current-mode-heading {
        display: grid;
        align-items: start;
    }

    .pn-current-mode-heading small {
        text-align: left;
    }
}

@media (max-width: 430px) {
    .pn-live-mode-switch button {
        padding-inline: 6px;
    }
}

/* 2.7.0 recipient-priced and boostable Business nudges */
.pn-business-price-setting {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(17,156,146,.16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(17,156,146,.08), rgba(255,255,255,.92));
    display: grid;
    gap: 14px;
}

.pn-business-price-setting-copy {
    color: #0f766f;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pn-business-price-setting-copy .pn-icon-svg {
    width: 22px;
    height: 22px;
}

.pn-business-price-setting-copy > span {
    display: grid;
    gap: 4px;
}

.pn-business-price-setting-copy strong {
    font-size: 11px;
}

.pn-business-price-setting-copy small,
.pn-business-price-earning small,
.pn-business-price-wallet {
    color: #66827f;
    font-size: 9px;
    line-height: 1.5;
}

.pn-business-price-control {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(120px, 170px);
    align-items: center;
    gap: 14px;
}

.pn-business-price-control > span {
    color: #164f4b;
    font-size: 12px;
    font-weight: 800;
}

.pn-business-price-control > span b {
    color: #0b8179;
    font-size: 24px;
    letter-spacing: -.04em;
}

.pn-business-price-control .pn-input {
    min-height: 46px;
    text-align: center;
    font-weight: 850;
}

.pn-business-price-earning {
    padding: 12px 13px;
    border: 1px solid rgba(17,156,146,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    display: grid;
    gap: 3px;
}

.pn-business-price-earning > span {
    color: #315e5a;
    font-size: 10px;
}

.pn-business-price-earning strong {
    color: #0c7d75;
}

.pn-business-nudge-quote {
    margin: 17px 0;
    padding: 15px;
    border: 1px solid rgba(17,156,146,.16);
    border-radius: 19px;
    color: #0e7871;
    background: linear-gradient(145deg, rgba(17,156,146,.09), rgba(247,255,253,.96));
    display: grid;
    align-items: stretch;
    gap: 12px;
    text-align: left;
}

.pn-business-nudge-quote-head {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 11px !important;
}

.pn-business-quote-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: white;
    background: #119c92;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.pn-business-quote-icon .pn-icon-svg {
    width: 20px;
    height: 20px;
}

.pn-business-nudge-quote-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-business-nudge-quote-head strong {
    color: #145f59;
    font-size: 12px;
}

.pn-business-nudge-quote-head small {
    color: #67827f;
    font-size: 8px;
    line-height: 1.45;
}

.pn-business-offer-field {
    padding: 12px;
    border: 1px solid rgba(17,156,146,.12);
    border-radius: 15px;
    background: rgba(255,255,255,.82);
    display: grid;
    grid-template-columns: 1fr 105px;
    align-items: center;
    gap: 12px;
}

.pn-business-offer-field > span {
    color: #315e5a;
    font-size: 10px;
    font-weight: 850;
}

.pn-business-offer-field .pn-input {
    min-height: 42px;
    padding-inline: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
}

.pn-business-boost-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.pn-business-boost-buttons button {
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid rgba(17,156,146,.15);
    border-radius: 11px;
    color: #176f69;
    background: white;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.pn-business-boost-buttons button:hover {
    border-color: rgba(17,156,146,.35);
    background: #f4fffc;
}

.pn-business-offer-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.pn-business-offer-summary > span {
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid rgba(17,156,146,.1);
    border-radius: 13px;
    background: rgba(255,255,255,.74);
    display: grid;
    gap: 3px;
    text-align: center;
}

.pn-business-offer-summary small {
    color: #72817f;
    font-size: 7px;
}

.pn-business-offer-summary strong {
    color: #11766f;
    font-size: 10px;
}

.pn-business-boost-note {
    margin: 0;
    color: #71817e;
    font-size: 8px;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 520px) {
    .pn-business-price-control,
    .pn-business-offer-field {
        grid-template-columns: 1fr;
    }

    .pn-business-price-control .pn-input,
    .pn-business-offer-field .pn-input {
        width: 100%;
    }

    .pn-business-boost-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pn-business-offer-summary {
        grid-template-columns: 1fr;
    }
}

#pn-nudge-modal .pn-action-sheet {
    max-height: 92svh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 2.8.0 digital earnings wallet and cash-out */
.pn-cash-wallet-card {
    margin: 0 0 34px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid rgba(17,156,146,.18);
    border-radius: 28px;
    background: linear-gradient(145deg, #f8fffd, #f7f8fc);
}
.pn-cash-wallet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.pn-cash-wallet-head h3 { margin: 5px 0 9px; color: var(--pn-ink); font-size: 25px; letter-spacing: -.035em; }
.pn-cash-wallet-head p { max-width: 690px; margin: 0; color: var(--pn-muted); font-size: 11px; line-height: 1.6; }
.pn-payout-status { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pn-payout-status.is-ready { color: #0a745f; background: rgba(23,166,115,.12); }
.pn-payout-status.is-incomplete,
.pn-payout-status.is-reviewing { color: #946100; background: rgba(244,161,0,.13); }
.pn-payout-status.is-not_connected { color: #6b6d77; background: rgba(113,115,127,.11); }
.pn-cash-wallet-metrics { margin: 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pn-cash-wallet-metrics article { min-width: 0; padding: 17px; border: 1px solid rgba(17,156,146,.11); border-radius: 18px; background: rgba(255,255,255,.82); display: grid; gap: 4px; }
.pn-cash-wallet-metrics small { color: #5e8580; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.pn-cash-wallet-metrics strong { color: #173d39; font-size: 17px; }
.pn-cash-wallet-metrics span { color: var(--pn-muted); font-size: 9px; }
.pn-payout-account-row { padding: 17px; border: 1px solid var(--pn-line); border-radius: 19px; background: white; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pn-payout-account-row > div:first-child { display: grid; gap: 4px; }
.pn-payout-account-row strong { color: var(--pn-ink); font-size: 12px; }
.pn-payout-account-row small { color: var(--pn-muted); font-size: 9px; line-height: 1.5; }
.pn-payout-account-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pn-payout-account-actions .pn-btn { min-height: 40px; padding-inline: 14px; font-size: 10px; }
.pn-cashout-form { margin-top: 14px; padding: 19px; border: 1px solid var(--pn-line); border-radius: 20px; background: white; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; align-items: end; }
.pn-cashout-form .pn-field small { display: block; margin-top: 6px; color: var(--pn-faint); font-size: 8px; line-height: 1.45; }
.pn-cashout-quote { min-width: 190px; padding: 12px 15px; border-radius: 15px; background: #f4fbf9; display: grid; }
.pn-cashout-quote span { color: #5e8580; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.pn-cashout-quote strong { color: #0e766d; font-size: 21px; }
.pn-cashout-quote small { color: #72817f; font-size: 8px; }
.pn-cashout-confirm { grid-column: 1 / -1; margin: 0; }
.pn-cashout-form > .pn-btn { grid-column: 1 / -1; width: 100%; }
.pn-cashout-form .pn-form-message { grid-column: 1 / -1; }
.pn-payout-history-heading { margin-top: 25px !important; }
.pn-payout-history { overflow: hidden; border: 1px solid var(--pn-line); border-radius: 19px; background: white; }
.pn-payout-history-item { min-height: 66px; padding: 13px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }
.pn-payout-history-item + .pn-payout-history-item { border-top: 1px solid var(--pn-line); }
.pn-payout-history-icon { width: 38px; height: 38px; border-radius: 13px; color: #0e766d; background: rgba(17,156,146,.09); display: grid; place-items: center; }
.pn-payout-history-icon .pn-icon-svg { width: 18px; height: 18px; }
.pn-payout-history-item > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.pn-payout-history-item strong { color: var(--pn-ink); font-size: 10px; }
.pn-payout-history-item small { color: var(--pn-muted); font-size: 8px; }
.pn-payout-history-item > b { color: #0e766d; font-size: 12px; text-align: right; }
.pn-payout-history-item.is-failed > b,
.pn-payout-history-item.is-reversed > b { color: var(--pn-danger); }

@media (max-width: 760px) {
    .pn-cash-wallet-head,
    .pn-payout-account-row { align-items: stretch; flex-direction: column; }
    .pn-payout-status { width: fit-content; }
    .pn-cash-wallet-metrics { grid-template-columns: 1fr; }
    .pn-payout-account-actions { justify-content: stretch; }
    .pn-payout-account-actions .pn-btn { flex: 1 1 160px; }
    .pn-cashout-form { grid-template-columns: 1fr; }
    .pn-cashout-quote,
    .pn-cashout-confirm,
    .pn-cashout-form > .pn-btn,
    .pn-cashout-form .pn-form-message { grid-column: 1; }
}

/* 2.8.0 cash-out availability state */
.pn-payout-status.is-disabled {
    color: #7b5562;
    background: rgba(217, 54, 93, .1);
}

.pn-cashout-disabled-notice {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid rgba(217, 54, 93, .14);
    border-radius: 17px;
    background: rgba(255, 240, 244, .72);
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.pn-cashout-disabled-notice[hidden] {
    display: none !important;
}

.pn-cashout-disabled-notice .pn-icon-svg {
    width: 19px;
    height: 19px;
    color: var(--pn-danger);
}

.pn-cashout-disabled-notice > span {
    display: grid;
    gap: 3px;
}

.pn-cashout-disabled-notice strong {
    color: var(--pn-ink);
    font-size: 11px;
}

.pn-cashout-disabled-notice small {
    color: var(--pn-muted);
    font-size: 9px;
    line-height: 1.5;
}

.pn-payout-history-item.is-reconciliation > b {
    color: var(--pn-warning);
}

/* 2.8.1 mobile notification permission recovery */
.pn-permission-card.is-pending {
    border-color: rgba(124, 92, 255, .24);
    background: #f8f6ff;
}

.pn-permission-card.is-pending .pn-permission-state {
    color: #6246d8;
    background: #eee9ff;
}

.pn-notification-help-sheet {
    width: min(100%, 520px);
    padding: 30px;
    text-align: left;
}

.pn-notification-help-sheet [hidden] {
    display: none !important;
}

.pn-notification-help-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 18px;
    color: var(--pn-primary);
    background: var(--pn-primary-soft);
    display: grid;
    place-items: center;
}

.pn-notification-help-icon .pn-icon-svg {
    width: 25px;
    height: 25px;
}

.pn-notification-help-sheet h2 {
    margin: 7px 0 11px;
    color: var(--pn-ink);
    font-size: clamp(27px, 6vw, 34px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.pn-notification-help-sheet > p {
    margin: 0;
    color: var(--pn-muted);
    font-size: 13px;
    line-height: 1.62;
}

.pn-notification-help-steps {
    margin: 20px 0;
    padding: 17px 18px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: var(--pn-surface-soft);
    color: #555864;
    font-size: 12px;
    line-height: 1.55;
}

.pn-notification-help-steps:empty {
    display: none;
}

.pn-notification-help-steps ol {
    margin: 0;
    padding-left: 20px;
}

.pn-notification-help-steps li + li {
    margin-top: 8px;
}

.pn-notification-help-steps p {
    margin: 13px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--pn-line);
    color: var(--pn-muted);
}

.pn-notification-help-sheet > .pn-btn {
    width: 100%;
    margin-top: 4px;
    justify-content: center;
}

@media (max-width: 620px) {
    .pn-notification-help-sheet {
        padding: 26px 20px 22px;
        border-radius: 25px 25px 0 0;
    }
}


/* ProjEvo venture data-stream controls */
.pn-stream-card{display:grid;gap:18px}.pn-stream-heading{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.pn-stream-heading>span:nth-child(2){display:grid;gap:4px}.pn-stream-heading small,.pn-stream-groups small{display:block;color:var(--pn-muted,#687487);line-height:1.45}.pn-stream-status{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;background:rgba(126,139,159,.12);font-size:12px;font-weight:700}.pn-stream-status.is-active{background:rgba(34,197,94,.13);color:#18733a}.pn-stream-form{display:grid;gap:16px}.pn-stream-groups{display:grid;gap:8px;border:0;padding:0;margin:0}.pn-stream-groups legend{font-weight:700;margin-bottom:4px}.pn-stream-groups .pn-check-row{align-items:flex-start;padding:10px 0}.pn-stream-toggle{border-top:1px solid rgba(126,139,159,.16)}.pn-stream-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.pn-stream-counts>span{display:grid;gap:2px;padding:10px;border-radius:14px;background:rgba(126,139,159,.08);text-align:center}.pn-stream-counts strong{font-size:18px}.pn-stream-counts small{font-size:11px;color:var(--pn-muted,#687487)}.pn-stream-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}@media(max-width:640px){.pn-stream-heading{grid-template-columns:auto 1fr}.pn-stream-status{grid-column:1/-1;justify-self:start}.pn-stream-counts{grid-template-columns:repeat(2,minmax(0,1fr))}.pn-stream-actions .pn-btn{flex:1 1 100%}}

/* Notification deep-link inbox and mobile visual viewport (v2.9.1) */
:root {
    --pn-visual-viewport-height: 100dvh;
    --pn-visual-viewport-offset: 0px;
}

.pn-inbox-avatar {
    position: relative;
}

.pn-inbox-avatar .pn-chat-mode-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
}

.pn-incoming-nudge-shell {
    width: min(100%, 920px);
    max-height: min(90vh, 820px);
    overflow: hidden;
}

.pn-incoming-nudge-header {
    min-height: 78px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--pn-line);
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex: 0 0 auto;
}

.pn-incoming-nudge-header h3 {
    margin: 2px 0 0;
    color: var(--pn-ink);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.pn-incoming-nudge-layout {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .72fr);
    flex: 1;
    background: #fbfbfd;
}

.pn-incoming-nudge-focus {
    min-width: 0;
    padding: 28px;
    overflow-y: auto;
}

.pn-incoming-nudge-person {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--pn-line);
    border-radius: 22px;
    background: white;
    color: var(--pn-ink);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pn-incoming-nudge-person:hover {
    transform: translateY(-1px);
    border-color: rgba(255,61,110,.25);
    box-shadow: var(--pn-shadow-sm);
}

.pn-incoming-nudge-photo-wrap {
    width: 72px;
    height: 72px;
    position: relative;
    display: block;
}

.pn-incoming-nudge-photo-wrap img {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    object-fit: cover;
    background: #ececf1;
}

.pn-incoming-nudge-photo-wrap .pn-chat-mode-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
}

.pn-incoming-nudge-person > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-incoming-nudge-person small {
    color: var(--pn-primary-deep);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
}

.pn-incoming-nudge-person strong {
    overflow: hidden;
    color: var(--pn-ink);
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-incoming-nudge-person em {
    color: var(--pn-muted);
    font-size: 11px;
    font-style: normal;
}

.pn-incoming-nudge-person > b {
    color: var(--pn-primary-deep);
    font-size: 10px;
    white-space: nowrap;
}

.pn-incoming-nudge-value {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(17,156,146,.15);
    border-radius: 17px;
    background: rgba(17,156,146,.07);
    color: #0d746d;
    display: flex;
    align-items: center;
    gap: 11px;
}

.pn-incoming-nudge-value[hidden] {
    display: none !important;
}

.pn-incoming-nudge-value .pn-icon-svg {
    width: 24px;
    height: 24px;
}

.pn-incoming-nudge-value span {
    display: grid;
    gap: 2px;
}

.pn-incoming-nudge-value strong {
    font-size: 13px;
}

.pn-incoming-nudge-value small {
    color: #64827e;
    font-size: 9px;
}

.pn-incoming-nudge-copy {
    margin: 28px 0 18px;
}

.pn-incoming-nudge-copy h2 {
    margin: 0 0 8px;
    color: var(--pn-ink);
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.pn-incoming-nudge-copy p {
    max-width: 560px;
    margin: 0;
    color: var(--pn-muted);
    font-size: 12px;
    line-height: 1.65;
}

.pn-incoming-reply-form {
    display: grid;
    gap: 8px;
}

.pn-incoming-reply-form > label {
    color: var(--pn-ink);
    font-size: 11px;
    font-weight: 850;
}

.pn-incoming-reply-compose {
    padding: 7px;
    border: 1px solid var(--pn-line);
    border-radius: 19px;
    background: white;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: end;
    gap: 8px;
}

#pn-incoming-reply-input {
    width: 100%;
    min-height: 54px;
    max-height: 130px;
    padding: 10px 11px;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    color: var(--pn-ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
}

#pn-incoming-reply-send {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: var(--pn-primary);
    color: white;
    display: grid;
    place-items: center;
    cursor: pointer;
}

#pn-incoming-reply-send:disabled {
    opacity: .5;
}

#pn-incoming-reply-send .pn-icon-svg {
    width: 19px;
    height: 19px;
}

.pn-incoming-reply-form > small {
    color: var(--pn-faint);
    font-size: 9px;
}

.pn-other-nudges-panel {
    min-width: 0;
    padding: 22px 18px 24px;
    border-left: 1px solid var(--pn-line);
    overflow: hidden;
    background: white;
    display: flex;
    flex-direction: column;
}

.pn-other-nudges-heading {
    padding: 0 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.pn-other-nudges-heading span {
    color: var(--pn-ink);
    font-size: 12px;
    font-weight: 850;
}

.pn-other-nudges-heading small {
    color: var(--pn-faint);
    font-size: 9px;
}

.pn-other-nudges-list {
    min-height: 0;
    max-height: 570px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    align-content: start;
    gap: 8px;
}

.pn-other-nudge-row {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    background: #fbfbfd;
    color: var(--pn-ink);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}

.pn-other-nudge-row:hover {
    border-color: rgba(255,61,110,.25);
    background: #fff8fa;
}

.pn-other-nudge-avatar {
    width: 48px;
    height: 48px;
    position: relative;
    border-radius: 15px;
    background-position: center;
    background-size: cover;
}

.pn-other-nudge-avatar .pn-chat-mode-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    transform: scale(.82);
}

.pn-other-nudge-row > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-other-nudge-row strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-other-nudge-row small {
    overflow: hidden;
    color: var(--pn-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-other-nudge-row > b {
    color: var(--pn-primary-deep);
    font-size: 9px;
}

.pn-other-nudges-empty {
    padding: 22px 15px;
    border: 1px dashed var(--pn-line);
    border-radius: 16px;
    color: var(--pn-muted);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

.pn-chat-header,
.pn-chat-input-area {
    flex: 0 0 auto;
}

.pn-chat-input-area {
    padding-bottom: max(11px, env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
    .pn-incoming-nudge-layout {
        overflow-y: auto;
        grid-template-columns: 1fr;
    }

    .pn-incoming-nudge-focus {
        overflow: visible;
    }

    .pn-other-nudges-panel {
        border-top: 1px solid var(--pn-line);
        border-left: 0;
        overflow: visible;
    }

    .pn-other-nudges-list {
        max-height: 300px;
    }
}

@media (max-width: 620px) {
    #pn-chat-modal,
    #pn-incoming-nudge-modal {
        top: var(--pn-visual-viewport-offset);
        bottom: auto;
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
        overflow: hidden;
        align-items: flex-end;
    }

    #pn-chat-modal .pn-chat-shell,
    #pn-incoming-nudge-modal .pn-incoming-nudge-shell {
        width: 100%;
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
        border-radius: 24px 24px 0 0;
    }

    body.pn-keyboard-open #pn-chat-modal .pn-chat-shell,
    body.pn-keyboard-open #pn-incoming-nudge-modal .pn-incoming-nudge-shell {
        border-radius: 0;
    }

    .pn-chat-header {
        min-height: 66px;
        padding-top: max(8px, env(safe-area-inset-top));
        background: white;
        z-index: 3;
    }

    .pn-chat-messages {
        padding: 14px;
        overscroll-behavior: contain;
        scroll-padding-bottom: 16px;
    }

    .pn-chat-input-area {
        padding: 9px 10px max(9px, env(safe-area-inset-bottom));
        z-index: 3;
    }

    #pn-chat-input {
        font-size: 16px;
    }

    .pn-incoming-nudge-header {
        min-height: 68px;
        padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    }

    .pn-incoming-nudge-header h3 {
        font-size: 20px;
    }

    .pn-incoming-nudge-focus {
        padding: 18px 15px 22px;
    }

    .pn-incoming-nudge-person {
        padding: 13px;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pn-incoming-nudge-person > b {
        grid-column: 2;
        justify-self: start;
    }

    .pn-incoming-nudge-photo-wrap,
    .pn-incoming-nudge-photo-wrap img {
        width: 62px;
        height: 62px;
    }

    .pn-incoming-nudge-copy {
        margin: 22px 0 15px;
    }

    .pn-incoming-nudge-copy h2 {
        font-size: 27px;
    }

    #pn-incoming-reply-input {
        font-size: 16px;
        resize: none;
    }

    .pn-other-nudges-panel {
        padding: 18px 15px max(24px, env(safe-area-inset-bottom));
    }

    body.pn-keyboard-open .pn-other-nudges-panel {
        display: none;
    }
}

/* 2.9.2 installable web app, mobile discovery sheet and privacy confirmations */
.pn-install-app-sheet {
    width: min(100%, 470px);
    text-align: center;
}

.pn-install-app-logo {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border-radius: 25px;
    box-shadow: 0 16px 35px rgba(255, 61, 110, .24);
}

.pn-install-app-sheet > p,
.pn-privacy-action-sheet > p {
    margin: 10px 0 18px;
    color: var(--pn-muted);
    line-height: 1.62;
}

.pn-install-app-steps {
    margin: 4px 0 20px;
    display: grid;
    gap: 9px;
    text-align: left;
}

.pn-install-app-steps > span {
    min-height: 62px;
    padding: 12px 13px;
    border: 1px solid var(--pn-line);
    border-radius: 17px;
    background: var(--pn-surface-soft);
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
}

.pn-install-app-steps b {
    width: 30px;
    height: 30px;
    grid-row: 1 / 3;
    border-radius: 11px;
    color: white;
    background: var(--pn-primary);
    display: grid;
    place-items: center;
    font-size: 11px;
}

.pn-install-app-steps strong {
    color: var(--pn-ink);
    font-size: 12px;
}

.pn-install-app-steps small {
    margin-top: 2px;
    color: var(--pn-muted);
    font-size: 9px;
    line-height: 1.4;
}

.pn-install-app-sheet .pn-btn,
.pn-privacy-action-sheet .pn-btn {
    width: 100%;
    justify-content: center;
}

.pn-privacy-action-sheet {
    width: min(100%, 455px);
    text-align: center;
}

.pn-privacy-action-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 22px;
    color: white;
    background: linear-gradient(145deg, #272933, #111218);
    display: grid;
    place-items: center;
}

.pn-privacy-action-icon .pn-icon-svg {
    width: 30px;
    height: 30px;
}

.pn-privacy-action-sheet .pn-nudge-boundary {
    margin: 0 0 18px;
    text-align: left;
}

.pn-mobile-discovery-overlay {
    display: none;
}

.pn-mobile-discovery-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fbfbfd;
}

@media (max-width: 860px) {
    body.pn-mobile-app-fixed {
        height: 100dvh;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.pn-mobile-app-fixed #pn-app {
        position: fixed;
        inset: 0;
        z-index: 9000;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.pn-mobile-app-fixed .pn-app-header,
    body.pn-mobile-app-fixed .pn-live-mode-bar,
    body.pn-mobile-app-fixed .pn-bottom-nav {
        flex: 0 0 auto;
    }

    body.pn-mobile-app-fixed .pn-live-mode-bar {
        width: calc(100% - 18px);
    }

    body.pn-mobile-app-fixed .pn-discover-view {
        min-height: 0;
        height: auto;
        padding-bottom: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    body.pn-mobile-app-fixed .pn-map-stage,
    body.pn-mobile-app-fixed #pn-map-container {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    body.pn-mobile-app-fixed .pn-bottom-nav {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: calc(66px + env(safe-area-inset-bottom));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .pn-mobile-discovery-overlay {
        z-index: 100020;
    }

    .pn-mobile-discovery-shell {
        height: min(84dvh, 780px) !important;
        max-height: 84dvh !important;
    }

    .pn-mobile-discovery-header {
        min-height: 76px;
    }

    .pn-mobile-discovery-header h3 {
        font-size: 21px;
    }

    #pn-mobile-discovery-body .pn-nearby-panel {
        min-height: 100%;
        padding: 20px 16px calc(26px + env(safe-area-inset-bottom));
        border: 0;
        background: #fbfbfd;
    }

    #pn-mobile-discovery-body .pn-nearby-card {
        min-height: 330px;
    }

    .pn-install-app-sheet,
    .pn-privacy-action-sheet {
        padding-inline: 20px;
    }
}

@media (max-width: 860px) {
    .pn-discover-view > .pn-nearby-panel {
        display: none;
    }
}


/* 2.9.3 connection-realm app chrome */
:root {
    --pn-page-status-color: #ff3d6e;
    --pn-page-theme-strong: #e91e55;
}

.pn-app-shell {
    --pn-mode-accent: #ff3d6e;
    --pn-mode-accent-strong: #e91e55;
    --pn-mode-soft: rgba(255, 61, 110, .105);
    --pn-mode-muted: #9a6e7b;
    --pn-mode-nav-bg: rgba(255, 248, 250, .96);
    --pn-mode-header-bg: linear-gradient(180deg, rgba(255, 244, 247, .98), rgba(255, 255, 255, .94));
    --pn-mode-line: rgba(255, 61, 110, .16);
}

#pn-app[data-connection-mode="platonic"],
#pn-app[data-discovery-view="platonic"] {
    --pn-mode-accent: #7462f5;
    --pn-mode-accent-strong: #5a47e6;
    --pn-mode-soft: rgba(116, 98, 245, .11);
    --pn-mode-muted: #7770a5;
    --pn-mode-nav-bg: rgba(248, 247, 255, .97);
    --pn-mode-header-bg: linear-gradient(180deg, rgba(244, 242, 255, .99), rgba(255, 255, 255, .94));
    --pn-mode-line: rgba(116, 98, 245, .18);
}

#pn-app[data-connection-mode="business"],
#pn-app[data-discovery-view="business"] {
    --pn-mode-accent: #119c92;
    --pn-mode-accent-strong: #0c7f77;
    --pn-mode-soft: rgba(17, 156, 146, .11);
    --pn-mode-muted: #5f8c87;
    --pn-mode-nav-bg: rgba(245, 253, 252, .97);
    --pn-mode-header-bg: linear-gradient(180deg, rgba(239, 252, 250, .99), rgba(255, 255, 255, .94));
    --pn-mode-line: rgba(17, 156, 146, .18);
}

#pn-app[data-connection-mode="all"],
#pn-app[data-discovery-view="all"] {
    --pn-mode-accent: #5b6072;
    --pn-mode-accent-strong: #454a5b;
    --pn-mode-soft: rgba(91, 96, 114, .105);
    --pn-mode-muted: #777b89;
    --pn-mode-nav-bg: rgba(248, 249, 251, .97);
    --pn-mode-header-bg: linear-gradient(135deg, rgba(255, 246, 249, .98), rgba(246, 245, 255, .98) 48%, rgba(240, 252, 250, .98));
    --pn-mode-line: rgba(91, 96, 114, .16);
}

.pn-app-header {
    border-bottom-color: var(--pn-mode-line);
    background: var(--pn-mode-header-bg);
    transition: background .28s ease, border-color .28s ease;
}

.pn-app-header .pn-brand-mark {
    background: linear-gradient(145deg, var(--pn-mode-accent), var(--pn-mode-accent-strong));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--pn-mode-accent) 24%, transparent);
    transition: background .28s ease, box-shadow .28s ease;
}

.pn-app-header .pn-brand-button small,
.pn-live-mode-label span {
    color: color-mix(in srgb, var(--pn-mode-accent) 54%, #71737f);
    transition: color .28s ease;
}

.pn-bottom-nav {
    border-top-color: var(--pn-mode-line);
    background: var(--pn-mode-nav-bg);
    transition: background .28s ease, border-color .28s ease;
}

.pn-nav-item {
    color: var(--pn-mode-muted);
    transition: color .24s ease, background .24s ease, transform .18s ease;
}

.pn-nav-item .pn-icon-svg,
.pn-nav-item > span {
    transition: color .24s ease;
}

.pn-nav-item:hover,
.pn-nav-item:focus-visible {
    color: var(--pn-mode-accent);
}

.pn-nav-item.is-active {
    color: var(--pn-mode-accent);
    background: var(--pn-mode-soft);
}

.pn-nav-item i {
    background: var(--pn-mode-accent);
    box-shadow: 0 0 0 3px var(--pn-mode-nav-bg);
}

.pn-map-control-primary,
.pn-live-mode-switch button.is-active {
    background: var(--pn-mode-accent);
}

@media (max-width: 860px) {
    body.pn-theme-aware-page {
        background-color: var(--pn-page-status-color);
        transition: background-color .28s ease;
    }

    body.pn-theme-aware-page::before {
        content: "";
        position: fixed;
        z-index: 100000;
        top: 0;
        right: 0;
        left: 0;
        height: env(safe-area-inset-top, 0px);
        pointer-events: none;
        background: var(--pn-page-status-color);
        transition: background-color .28s ease;
    }

    .pn-app-header {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(64px + env(safe-area-inset-top, 0px));
    }

    .pn-bottom-nav {
        color: var(--pn-mode-accent);
    }
}

/* 2.10.0 — verified referrals and density-aware discovery */
.pn-verification-banner {
    margin: 12px 18px 0;
    padding: 12px 14px;
    border: 1px solid rgba(244,161,0,.24);
    border-radius: 16px;
    background: #fffaf0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
}
.pn-verification-banner > .pn-icon-svg { color: #c77d00; }
.pn-verification-banner > span { display: grid; gap: 2px; }
.pn-verification-banner strong { font-size: 11px; color: var(--pn-ink); }
.pn-verification-banner small { font-size: 9px; line-height: 1.45; color: var(--pn-muted); }

.pn-density-label {
    width: fit-content;
    margin-top: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(23,166,115,.1);
    color: #11785a;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pn-density-label.is-wider { color: #6650c8; background: rgba(124,92,255,.11); }
.pn-density-label.is-growing { color: #9a6500; background: rgba(244,161,0,.11); }
.pn-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.pn-referral-card {
    margin: 0 4px 22px;
    padding: 22px;
    border: 1px solid rgba(124,92,255,.17);
    border-radius: 24px;
    background: radial-gradient(circle at 92% 8%, rgba(124,92,255,.12), transparent 32%), linear-gradient(145deg, #fff, #faf9ff);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    box-shadow: var(--pn-shadow-sm);
}
.pn-referral-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: #6c50d8;
    background: rgba(124,92,255,.11);
    display: grid;
    place-items: center;
}
.pn-referral-card-icon .pn-icon-svg { width: 25px; height: 25px; }
.pn-referral-card h3 { margin: 3px 0 6px; font-size: 19px; letter-spacing: -.03em; }
.pn-referral-card p { margin: 0; max-width: 590px; color: var(--pn-muted); font-size: 10px; line-height: 1.55; }
.pn-referral-mini-stats { margin-top: 12px; display: flex; gap: 18px; }
.pn-referral-mini-stats span { display: flex; align-items: baseline; gap: 5px; }
.pn-referral-mini-stats strong { font-size: 16px; color: #5b42bf; }
.pn-referral-mini-stats small { font-size: 8px; color: var(--pn-muted); }

.pn-referral-shell { width: min(100%, 660px); }
.pn-referral-modal-body { padding: 22px; overflow-y: auto; }
.pn-referral-reward-hero {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(145deg, #7255df, #9b76ff);
    display: flex;
    align-items: center;
    gap: 12px;
}
.pn-referral-reward-hero > span { width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.pn-referral-reward-hero > div { display: grid; gap: 4px; }
.pn-referral-reward-hero strong { font-size: 13px; }
.pn-referral-reward-hero small { color: rgba(255,255,255,.8); font-size: 9px; line-height: 1.45; }
.pn-referral-progress {
    margin: 22px 0 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}
.pn-referral-progress span { padding: 12px; border: 1px solid var(--pn-line); border-radius: 15px; background: #fff; display: grid; text-align: center; }
.pn-referral-progress strong { font-size: 20px; color: #654bd0; }
.pn-referral-progress small { font-size: 8px; color: var(--pn-muted); text-transform: uppercase; letter-spacing: .08em; }
.pn-referral-list { overflow: hidden; border: 1px solid var(--pn-line); border-radius: 18px; background: #fff; }
.pn-referral-row { min-height: 66px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }
.pn-referral-row + .pn-referral-row { border-top: 1px solid var(--pn-line); }
.pn-referral-row-icon { width: 39px; height: 39px; border-radius: 13px; color: #6b50d2; background: rgba(124,92,255,.09); display: grid; place-items: center; }
.pn-referral-row-icon .pn-icon-svg { width: 18px; height: 18px; }
.pn-referral-row > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.pn-referral-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pn-ink); font-size: 10px; }
.pn-referral-row small { color: var(--pn-muted); font-size: 8px; }
.pn-referral-row.is-rewarded .pn-referral-row-icon { color: #12805d; background: rgba(23,166,115,.1); }

@media (max-width: 700px) {
    .pn-verification-banner { margin: 8px 10px 0; grid-template-columns: auto 1fr; }
    .pn-verification-banner .pn-text-button { grid-column: 2; justify-self: start; }
    .pn-referral-card { grid-template-columns: auto 1fr; padding: 18px; }
    .pn-referral-card > .pn-btn { grid-column: 1 / -1; width: 100%; }
    .pn-referral-modal-body { padding: 17px; }
}

/* ========================================================================== 
   Nudjee 2.11 — tabbed profile centre + horizontal landing journey
   ========================================================================== */

/* Profile settings: compact icon-driven sections instead of one long page. */
#pn-view-profile {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#pn-view-profile .pn-profile-form {
    height: 100%;
    min-height: 0;
    padding: 15px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.pn-profile-tabs {
    position: relative;
    z-index: 6;
    margin: 12px 0 8px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 22px rgba(28,24,40,.05);
    -webkit-overflow-scrolling: touch;
}

.pn-profile-tabs::-webkit-scrollbar { display: none; }

.pn-profile-tab {
    min-width: 0;
    min-height: 60px;
    padding: 8px 7px;
    border: 0;
    border-radius: 13px;
    color: #7b7d88;
    background: transparent;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pn-profile-tab:hover {
    color: var(--pn-ink);
    background: var(--pn-surface-soft);
}

.pn-profile-tab.is-active {
    color: var(--pn-mode-accent, var(--pn-primary-deep));
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 16%, transparent);
}

.pn-profile-tab .pn-icon-svg {
    width: 19px;
    height: 19px;
}

.pn-profile-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 850;
}

.pn-profile-tab-panel {
    min-height: 0;
    padding: 2px 4px 22px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    animation: pnProfilePanelIn .22s ease both;
}

.pn-profile-tab-panel[hidden],
.pn-profile-external-panel[hidden] {
    display: none !important;
}

.pn-profile-tab-panel > .pn-section-heading:first-child {
    margin-top: 12px;
}

.pn-profile-tab-panel .pn-settings-card,
.pn-profile-tab-panel .pn-referral-card {
    margin-bottom: 16px;
}

.pn-profile-external-panel {
    margin: 0 15px 22px;
}

#pn-view-profile .pn-sticky-save {
    position: relative;
    bottom: auto;
    z-index: 7;
    margin: 0 -15px -15px;
    padding: 11px 15px calc(15px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(28,24,40,.06);
}

@keyframes pnProfilePanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Guest landing: one fixed viewport, with vertical input driving a horizontal journey. */
html.pn-landing-experience,
body.pn-landing-experience {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.pn-landing-experience {
    margin: 0 !important;
}

.pn-landing {
    position: fixed;
    inset: 0;
    z-index: 9990;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.pn-landing-nav {
    height: 78px;
    min-height: 78px;
    flex: 0 0 78px;
}

.pn-landing-stage {
    position: relative;
    width: 100%;
    height: calc(100dvh - 78px);
    overflow: hidden;
    touch-action: pan-y pan-x;
}

.pn-landing-track {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    transform: translate3d(0,0,0);
    transition: transform .72s cubic-bezier(.2,.78,.24,1);
    will-change: transform;
}

.pn-landing-slide {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 0 !important;
    flex: 0 0 100%;
    margin: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

.pn-landing-slide > * {
    opacity: .42;
    transform: translateX(-34px);
    transition: opacity .46s ease .12s, transform .55s cubic-bezier(.2,.78,.24,1) .08s;
}

.pn-landing-slide.is-active > * {
    opacity: 1;
    transform: translateX(0);
}

.pn-landing-hero.pn-landing-slide {
    padding: clamp(32px, 5vh, 66px) clamp(30px, 6vw, 88px);
}

.pn-landing-section.pn-landing-slide:not(.pn-how-strip):not(.pn-audience-section):not(.pn-token-section) {
    padding: clamp(30px, 5vh, 60px) clamp(28px, 6vw, 76px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pn-how-strip.pn-landing-slide {
    padding: clamp(38px, 8vh, 90px) clamp(34px, 8vw, 120px);
    border-radius: 0;
    border-inline: 0;
    align-content: center;
    background: rgba(255,255,255,.025);
}

.pn-audience-section.pn-landing-slide,
.pn-token-section.pn-landing-slide {
    padding: clamp(36px, 6vh, 70px) clamp(32px, 7vw, 96px);
}

.pn-final-cta.pn-landing-slide {
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
}

.pn-landing-section-head {
    margin-bottom: clamp(20px, 3.5vh, 34px);
}

.pn-mode-story {
    min-height: clamp(270px, 39vh, 360px);
}

.pn-mode-icon {
    margin-bottom: clamp(18px, 3vh, 32px);
}

.pn-landing-progress {
    position: fixed;
    z-index: 9995;
    right: max(14px, calc(env(safe-area-inset-right) + 10px));
    top: 50%;
    transform: translateY(-42%);
    display: grid;
    gap: 7px;
}

.pn-landing-progress-dot {
    min-width: 0;
    height: 28px;
    padding: 0 8px 0 7px;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.54);
    background: rgba(7,9,14,.42);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: color .2s ease, background .2s ease, width .2s ease;
}

.pn-landing-progress-dot i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.pn-landing-progress-dot span {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 800;
    transition: max-width .22s ease, opacity .22s ease;
}

.pn-landing-progress-dot:hover span,
.pn-landing-progress-dot.is-active span {
    max-width: 92px;
    opacity: 1;
}

.pn-landing-progress-dot.is-active {
    color: white;
    background: rgba(255,61,110,.72);
}

.pn-landing-scroll-hint {
    position: fixed;
    z-index: 9994;
    left: max(18px, calc(env(safe-area-inset-left) + 14px));
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.58);
    background: rgba(8,10,15,.38);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    transition: opacity .2s ease;
}

.pn-landing-scroll-hint .pn-icon-svg {
    width: 13px;
    height: 13px;
    transform: rotate(90deg);
}

.pn-landing.is-at-end .pn-landing-scroll-hint {
    opacity: 0;
}

@media (max-height: 780px) and (min-width: 761px) {
    .pn-landing-nav { height: 68px; min-height: 68px; }
    .pn-landing-stage { height: calc(100dvh - 68px); }
    .pn-landing-hero.pn-landing-slide { padding-block: 26px; }
    .pn-landing-copy h1 { font-size: clamp(40px, 5vw, 62px); }
    .pn-landing-device { min-height: 450px; width: min(100%, 355px); }
    .pn-device-radar { height: 235px; }
    .pn-mode-story { min-height: 255px; padding: 22px; }
    .pn-mode-story h3 { font-size: 21px; }
    .pn-mode-story ul { margin-top: 14px; gap: 7px; }
    .pn-landing-plan { padding: 20px; }
    .pn-landing-plan ul { gap: 7px; margin-bottom: 15px; }
}

@media (max-width: 760px) {
    .pn-profile-tabs {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78px;
        margin-inline: -2px;
    }

    .pn-profile-tab {
        min-height: 56px;
    }

    .pn-profile-tab span {
        font-size: 7.5px;
    }

    .pn-landing-nav {
        height: 66px;
        min-height: 66px;
    }

    .pn-landing-stage {
        height: calc(100dvh - 66px);
    }

    .pn-landing-hero.pn-landing-slide {
        position: relative;
        padding: 34px 20px 70px;
        display: flex;
        align-items: center;
        text-align: left;
    }

    .pn-landing-copy {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 520px;
        margin: 0;
    }

    .pn-landing-copy h1 {
        max-width: 92%;
        font-size: clamp(39px, 12vw, 56px);
    }

    .pn-landing-copy > p {
        max-width: 88%;
        font-size: 14px;
    }

    .pn-landing .pn-guest-actions {
        width: min(100%, 340px);
    }

    .pn-landing-proof {
        width: min(92%, 400px);
    }

    .pn-landing-device {
        position: absolute;
        z-index: 1;
        width: 235px;
        min-height: 360px;
        right: -92px;
        bottom: -44px;
        opacity: .22;
        transform: rotate(7deg);
        pointer-events: none;
    }

    .pn-device-radar { height: 190px; }
    .pn-device-note, .pn-device-card { display: none; }

    .pn-how-strip.pn-landing-slide {
        padding: 42px 18px;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
    }

    .pn-how-strip > div {
        min-height: 0;
        padding: 22px 18px;
    }

    .pn-landing-section.pn-landing-slide:not(.pn-how-strip):not(.pn-audience-section):not(.pn-token-section),
    .pn-audience-section.pn-landing-slide,
    .pn-token-section.pn-landing-slide {
        padding: 28px 18px 64px;
    }

    .pn-landing-section h2,
    .pn-token-copy h2,
    .pn-audience-section h2 {
        font-size: clamp(30px, 9vw, 39px);
    }

    .pn-landing-section-head {
        margin-bottom: 18px;
    }

    .pn-mode-showcase,
    .pn-landing-plans {
        width: calc(100% + 18px);
        margin-right: -18px;
        padding-right: 18px;
        display: flex;
        gap: 11px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pn-mode-showcase::-webkit-scrollbar,
    .pn-landing-plans::-webkit-scrollbar { display: none; }

    .pn-mode-story,
    .pn-landing-plan {
        flex: 0 0 min(82vw, 330px);
        scroll-snap-align: start;
    }

    .pn-mode-story {
        min-height: 330px;
        padding: 22px;
    }

    .pn-audience-section.pn-landing-slide,
    .pn-token-section.pn-landing-slide {
        grid-template-columns: 1fr;
        align-content: center;
        gap: 22px;
    }

    .pn-audience-visual {
        padding: 14px;
    }

    .pn-token-flow {
        margin-top: 18px;
    }

    .pn-credit-pack-preview {
        padding: 12px;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 7px;
    }

    .pn-credit-pack-preview article {
        padding: 10px;
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .pn-credit-pack-preview article > span {
        grid-row: auto;
        width: 34px;
        height: 34px;
        margin-bottom: 5px;
    }

    .pn-credit-pack-preview > p {
        grid-column: 1 / -1;
    }

    .pn-landing-progress {
        top: auto;
        right: 50%;
        bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
        transform: translateX(50%);
        display: flex;
        gap: 5px;
    }

    .pn-landing-progress-dot {
        width: 18px;
        height: 18px;
        padding: 0;
        justify-content: center;
        background: rgba(7,9,14,.42);
    }

    .pn-landing-progress-dot span { display: none; }
    .pn-landing-progress-dot.is-active { width: 34px; }

    .pn-landing-scroll-hint {
        left: 12px;
        bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
        padding: 5px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-landing-track,
    .pn-landing-slide > *,
    .pn-profile-tab-panel {
        transition: none !important;
        animation: none !important;
    }
}


/* ========================================================================== 
   Nudjee 2.11.1 — profile scroll + landing nav regression fixes
   ========================================================================== */

/*
 * Use the hub view itself as the one vertical scroll surface. 2.11.0 made
 * both the view and each active tab panel scrollable, which can prevent wheel
 * and touch scrolling depending on the browser's grid/overflow resolution.
 */
#pn-view-profile {
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-behavior: smooth;
}

#pn-view-profile .pn-profile-form {
    height: auto !important;
    min-height: 100%;
    padding: 15px;
    display: block !important;
}

#pn-view-profile .pn-profile-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#pn-view-profile .pn-profile-tab-panel {
    min-height: 0;
    padding: 2px 4px 26px 0;
    overflow: visible !important;
    overscroll-behavior: auto;
    touch-action: auto;
}

#pn-view-profile .pn-sticky-save {
    position: sticky !important;
    bottom: 0;
    z-index: 22;
    margin: 8px -15px -15px;
    background: rgba(251,251,253,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#pn-view-profile .pn-profile-external-panel {
    margin-inline: 15px;
}

@media (max-width: 760px) {
    #pn-view-profile {
        scroll-padding-top: 86px;
    }

    #pn-view-profile .pn-profile-tabs {
        top: 0;
    }
}


/* 2.11.2 animated landing connection background */
.pn-landing-network {
    position: absolute;
    inset: 84px 0 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.pn-network-orb,
.pn-network-link {
    position: absolute;
    opacity: .96;
}

.pn-network-orb {
    border-radius: 50%;
    filter: blur(.2px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.18);
    animation: pnNetworkFloat 11s ease-in-out infinite;
}

.pn-network-orb::before,
.pn-network-orb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.pn-network-orb::before {
    inset: -18%;
    opacity: .28;
    filter: blur(18px);
    background: inherit;
}

.pn-network-orb::after {
    inset: 22%;
    background: rgba(255,255,255,.7);
    opacity: .28;
}

.pn-network-orb.orb-one {
    width: 112px;
    height: 112px;
    top: 10%;
    left: 8%;
    background: radial-gradient(circle at 32% 30%, #fff1f5 0 6%, rgba(255,255,255,.18) 8%, rgba(255,255,255,0) 24%), linear-gradient(145deg, rgba(255,70,124,.94), rgba(255,132,167,.56));
    animation-delay: -1.5s;
}

.pn-network-orb.orb-two {
    width: 88px;
    height: 88px;
    top: 58%;
    left: 18%;
    background: radial-gradient(circle at 32% 30%, #f4f0ff 0 7%, rgba(255,255,255,.16) 9%, rgba(255,255,255,0) 24%), linear-gradient(145deg, rgba(124,92,255,.96), rgba(95,156,255,.54));
    animation-duration: 13s;
    animation-delay: -5s;
}

.pn-network-orb.orb-three {
    width: 132px;
    height: 132px;
    top: 15%;
    right: 12%;
    background: radial-gradient(circle at 32% 30%, #effffb 0 6%, rgba(255,255,255,.16) 8%, rgba(255,255,255,0) 24%), linear-gradient(145deg, rgba(24,190,174,.92), rgba(120,229,196,.5));
    animation-duration: 14s;
    animation-delay: -3s;
}

.pn-network-orb.orb-four {
    width: 74px;
    height: 74px;
    top: 68%;
    right: 20%;
    background: radial-gradient(circle at 32% 30%, #f0f8ff 0 7%, rgba(255,255,255,.16) 9%, rgba(255,255,255,0) 24%), linear-gradient(145deg, rgba(94,147,255,.95), rgba(255,107,168,.48));
    animation-duration: 12s;
    animation-delay: -8s;
}

.pn-network-link {
    height: 2px;
    border-radius: 999px;
    transform-origin: left center;
    background:
        radial-gradient(circle, rgba(255,255,255,.9) 0 1.3px, transparent 1.7px) left center / 14px 100% repeat-x,
        linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.24), rgba(255,255,255,.03));
    opacity: .55;
    overflow: visible;
}

.pn-network-link::before {
    content: "";
    position: absolute;
    inset: -1px 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
    opacity: .45;
}

.pn-network-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,.07), 0 0 20px rgba(255,255,255,.4);
    background: radial-gradient(circle at 35% 35%, #ffffff 0 20%, rgba(255,255,255,.86) 28%, rgba(255,255,255,.35) 72%, rgba(255,255,255,0) 100%);
    animation: pnNetworkTravel 4.4s linear infinite;
}

.pn-network-link.link-one {
    top: 24%;
    left: 15%;
    width: 30%;
    transform: rotate(10deg);
}

.pn-network-link.link-two {
    top: 56%;
    left: 25%;
    width: 24%;
    transform: rotate(-23deg);
    animation-delay: -.8s;
}

.pn-network-link.link-two::after { animation-delay: -.8s; }

.pn-network-link.link-three {
    top: 33%;
    right: 16%;
    width: 26%;
    transform: rotate(122deg);
    animation-delay: -1.6s;
}

.pn-network-link.link-three::after { animation-delay: -1.6s; }

.pn-network-link.link-four {
    top: 67%;
    right: 21%;
    width: 19%;
    transform: rotate(-32deg);
    animation-delay: -2.2s;
}

.pn-network-link.link-four::after { animation-delay: -2.2s; }

.pn-guest-glow-one {
    animation: pnGlowDriftOne 14s ease-in-out infinite;
}

.pn-guest-glow-two {
    animation: pnGlowDriftTwo 16s ease-in-out infinite;
}

.pn-device-radar::before,
.pn-device-radar::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    transform-origin: left center;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255,255,255,.95) 0 1.2px, transparent 1.7px) left center / 12px 100% repeat-x,
        linear-gradient(90deg, rgba(18,131,124,.12), rgba(18,131,124,.3), rgba(18,131,124,.12));
    opacity: .72;
}

.pn-device-radar::before {
    width: 118px;
    transform: rotate(-32deg);
}

.pn-device-radar::after {
    width: 126px;
    transform: rotate(148deg);
}

.pn-device-radar .pn-radar-person::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.32);
    opacity: .65;
    animation: pnRadarPulse 2.4s ease-out infinite;
}

.pn-device-radar .pn-radar-person.p2::before { animation-delay: 1.1s; }
.pn-device-radar .pn-radar-you::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: inherit;
    border: 1px solid rgba(255,61,110,.28);
    animation: pnRadarPulse 2.8s ease-out infinite;
}

@keyframes pnNetworkFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -14px, 0) scale(1.035); }
}

@keyframes pnNetworkTravel {
    0% { transform: translateX(0) scale(.72); opacity: 0; }
    12% { opacity: 1; }
    50% { transform: translateX(calc(50% - 6px)) scale(1); opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateX(calc(100% - 2px)) scale(.72); opacity: 0; }
}

@keyframes pnGlowDriftOne {
    0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .62; }
    50% { transform: translate3d(-14px, 18px, 0) scale(1.08); opacity: .82; }
}

@keyframes pnGlowDriftTwo {
    0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .52; }
    50% { transform: translate3d(20px, -14px, 0) scale(1.05); opacity: .74; }
}

@keyframes pnRadarPulse {
    0% { transform: scale(.88); opacity: .7; }
    70% { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-network-orb,
    .pn-network-link::after,
    .pn-guest-glow-one,
    .pn-guest-glow-two,
    .pn-device-radar .pn-radar-person::before,
    .pn-device-radar .pn-radar-you::after {
        animation: none !important;
    }
}

@media (max-width: 860px) {
    .pn-landing-network {
        inset: 72px 0 0;
        opacity: .88;
    }

    .pn-network-orb.orb-one { width: 86px; height: 86px; left: -2%; top: 13%; }
    .pn-network-orb.orb-two { width: 68px; height: 68px; left: 8%; top: 63%; }
    .pn-network-orb.orb-three { width: 102px; height: 102px; right: -4%; top: 17%; }
    .pn-network-orb.orb-four { width: 62px; height: 62px; right: 10%; top: 73%; }
    .pn-network-link.link-one { left: 9%; width: 30%; }
    .pn-network-link.link-two { left: 16%; width: 20%; }
    .pn-network-link.link-three { right: 9%; width: 22%; }
    .pn-network-link.link-four { right: 12%; width: 17%; }
}


/* ========================================================================== 
   Nudjee 2.11.3 — comprehensive mobile landing layout polish
   Keeps the fixed horizontal journey while reserving real space for the
   mobile header, progress rail and safe-area controls.
   ========================================================================== */

@media (max-width: 760px) {
    .pn-landing {
        --pn-mobile-slide-x: clamp(18px, 5vw, 24px);
        --pn-mobile-slide-top: clamp(18px, 2.8dvh, 28px);
        --pn-mobile-controls-h: calc(58px + env(safe-area-inset-bottom));
        --pn-mobile-copy: clamp(12px, 3.25vw, 14px);
        --pn-mobile-small: clamp(9px, 2.55vw, 11px);
    }

    .pn-landing,
    .pn-landing-stage,
    .pn-landing-track,
    .pn-landing-slide {
        max-width: 100vw;
    }

    .pn-landing-stage {
        overflow: hidden;
    }

    /* Every slide owns a protected content rectangle above the progress UI. */
    .pn-landing-slide,
    .pn-landing-section.pn-landing-slide,
    .pn-audience-section.pn-landing-slide,
    .pn-token-section.pn-landing-slide,
    .pn-how-strip.pn-landing-slide,
    .pn-final-cta.pn-landing-slide {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0 !important;
        padding: var(--pn-mobile-slide-top) var(--pn-mobile-slide-x) var(--pn-mobile-controls-h) !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .pn-landing-slide > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Header is compact but never lets the brand/sign-in controls escape. */
    .pn-landing-nav {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 9px 14px;
    }

    .pn-landing-brand {
        min-width: 0;
        gap: 9px;
    }

    .pn-landing-brand .pn-brand-mark-small {
        width: 43px;
        height: 43px;
        border-radius: 14px;
    }

    .pn-landing-brand strong { font-size: 16px; }
    .pn-landing-brand small { font-size: 7.5px; white-space: nowrap; }
    .pn-landing-nav > .pn-btn { min-height: 42px; padding-inline: 14px; white-space: nowrap; }

    /* Hero: compact its vertical footprint instead of vertically centring an
       over-height block and clipping the eyebrow at the top. */
    .pn-landing-hero.pn-landing-slide {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }

    .pn-landing-copy {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .pn-landing .pn-eyebrow {
        margin-bottom: 7px;
        font-size: clamp(9px, 2.5vw, 11px);
        line-height: 1.25;
    }

    .pn-landing-copy h1 {
        max-width: 100%;
        margin: 8px 0 15px;
        font-size: clamp(36px, 10.6vw, 48px);
        line-height: .99;
        letter-spacing: -.055em;
    }

    .pn-landing-copy > p {
        max-width: min(100%, 560px);
        font-size: var(--pn-mobile-copy);
        line-height: 1.52;
    }

    .pn-landing .pn-guest-actions {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        display: grid;
        grid-template-columns: 1.08fr .92fr;
        gap: 9px;
    }

    .pn-landing .pn-guest-actions .pn-btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 0 12px;
        font-size: clamp(10px, 2.9vw, 13px);
        line-height: 1.2;
        text-align: center;
    }

    .pn-landing-proof {
        width: calc(100% + 4px);
        max-width: none;
        margin: 18px -2px 0;
        padding: 2px;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pn-landing-proof::-webkit-scrollbar { display: none; }
    .pn-landing-proof span {
        flex: 0 0 auto;
        padding: 7px 9px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 999px;
        background: rgba(255,255,255,.035);
        font-size: 9px;
        white-space: nowrap;
    }

    .pn-landing-device {
        width: 205px;
        min-height: 318px;
        right: -112px;
        bottom: -60px;
        opacity: .14;
    }

    .pn-device-radar { height: 160px; }

    /* How it works: guaranteed equal rows inside the safe content rectangle. */
    .pn-how-strip.pn-landing-slide {
        display: grid;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        align-content: stretch;
        gap: 9px;
        border: 0;
        background: transparent;
    }

    .pn-how-strip > div {
        min-height: 0;
        padding: clamp(14px, 2.5dvh, 20px);
        border: 1px solid var(--pn-landing-line) !important;
        border-radius: 20px;
        background: rgba(255,255,255,.045);
    }

    .pn-how-strip span { font-size: clamp(25px, 8vw, 32px); }
    .pn-how-strip strong { font-size: clamp(12px, 3.3vw, 14px); }
    .pn-how-strip small { font-size: clamp(9px, 2.7vw, 11px); line-height: 1.45; }

    /* Shared section header sizing. */
    .pn-landing-section-head {
        width: 100%;
        margin: 0 0 clamp(12px, 2dvh, 18px);
        text-align: center;
    }

    .pn-landing-section h2,
    .pn-token-copy h2,
    .pn-audience-section h2 {
        margin: 7px 0 11px;
        font-size: clamp(27px, 7.6vw, 35px);
        line-height: 1.04;
        letter-spacing: -.045em;
    }

    .pn-landing-section-head p,
    .pn-token-copy > p,
    .pn-audience-section > div:first-child > p {
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.5;
    }

    /* Ways to connect: the cards occupy only the remaining height and can no
       longer be cut off by the progress dots. */
    #pn-modes.pn-landing-slide,
    #pn-plans.pn-landing-slide {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr);
        align-content: stretch;
        justify-content: stretch;
    }

    #pn-modes .pn-mode-showcase,
    #pn-plans .pn-landing-plans {
        width: calc(100% + var(--pn-mobile-slide-x));
        min-height: 0;
        height: 100%;
        margin: 0 calc(var(--pn-mobile-slide-x) * -1) 0 0;
        padding: 0 var(--pn-mobile-slide-x) 2px 0;
        align-items: stretch;
    }

    #pn-modes .pn-mode-story,
    #pn-plans .pn-landing-plan {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    #pn-modes .pn-mode-story {
        flex-basis: min(79vw, 320px);
        padding: clamp(16px, 3.8vw, 21px);
        display: flex;
        flex-direction: column;
    }

    #pn-modes .pn-mode-icon {
        width: 48px;
        height: 48px;
        margin: 0 0 clamp(12px, 2dvh, 17px);
        border-radius: 16px;
    }

    #pn-modes .pn-mode-icon .pn-icon-svg { width: 22px; height: 22px; }
    #pn-modes .pn-mode-story > small { font-size: 8px; }
    #pn-modes .pn-mode-story h3 { margin: 8px 0 9px; font-size: clamp(20px, 5.7vw, 24px); }
    #pn-modes .pn-mode-story p { font-size: clamp(10px, 2.85vw, 12px); line-height: 1.48; }
    #pn-modes .pn-mode-story ul { margin-top: auto; padding-top: 12px; gap: 6px; }
    #pn-modes .pn-mode-story li { font-size: clamp(8.5px, 2.45vw, 10px); line-height: 1.35; }

    /* Privacy slide uses vertical centring only after its content has been
       compacted enough to remain entirely within the slide. */
    .pn-audience-section.pn-landing-slide {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        gap: clamp(14px, 2.4dvh, 20px);
    }

    .pn-audience-visual {
        width: 100%;
        padding: clamp(12px, 3vw, 16px);
        gap: 9px;
        border-radius: 22px;
    }

    .pn-audience-visual > div { padding: 12px; border-radius: 16px; }
    .pn-audience-visual span { width: 37px; height: 37px; }
    .pn-audience-visual strong { min-width: 0; font-size: 9px; line-height: 1.35; }

    /* Credits: two compact rows. The explanatory copy gets the majority of
       height; packs stay visible as a bounded three-column strip. */
    #pn-credits.pn-landing-slide {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, auto) auto;
        align-content: center;
        gap: clamp(12px, 2dvh, 18px);
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    #pn-credits .pn-token-copy { min-width: 0; }
    #pn-credits .pn-token-copy h2 { font-size: clamp(27px, 7.5vw, 34px); }
    #pn-credits .pn-token-copy > p { font-size: clamp(10.5px, 2.9vw, 12.5px); line-height: 1.48; }

    #pn-credits .pn-token-flow {
        margin-top: 13px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 6px;
    }

    #pn-credits .pn-token-flow span {
        min-width: 0;
        padding: 8px 7px;
        border-radius: 14px;
        font-size: clamp(7.5px, 2.1vw, 9px);
        line-height: 1.25;
        text-align: center;
    }

    #pn-credits .pn-token-flow span:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(72%, 240px);
    }

    #pn-credits .pn-token-flow i:nth-of-type(2) { display: none; }

    #pn-credits .pn-credit-pack-preview {
        width: 100%;
        padding: 10px;
        gap: 7px;
        border-radius: 20px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #pn-credits .pn-credit-pack-preview article {
        min-width: 0;
        padding: 9px 5px;
        border-radius: 14px;
    }

    #pn-credits .pn-credit-pack-preview article > span {
        width: 31px;
        height: 31px;
        border-radius: 11px;
    }

    #pn-credits .pn-credit-pack-preview article strong {
        font-size: clamp(9px, 2.55vw, 11px);
        white-space: nowrap;
    }

    #pn-credits .pn-credit-pack-preview article small {
        font-size: clamp(7px, 2.05vw, 8.5px);
        line-height: 1.35;
        text-align: center;
    }

    #pn-credits .pn-credit-pack-preview > p {
        margin-top: 2px;
        font-size: 8px;
        line-height: 1.35;
    }

    /* Plans: card height is bound to the available second grid row. Feature
       rows, token stat and CTA all stay inside the card border. */
    #pn-plans .pn-landing-section-head h2 {
        font-size: clamp(27px, 7.5vw, 34px);
    }

    #pn-plans .pn-landing-plan {
        flex: 0 0 min(82vw, 326px);
        padding: clamp(14px, 3.5vw, 19px);
        border-radius: 22px;
    }

    #pn-plans .pn-plan-popular {
        margin: -4px 0 8px;
        padding: 5px 8px;
        font-size: 7px;
    }

    #pn-plans .pn-landing-plan h3 { font-size: 19px; }
    #pn-plans .pn-landing-plan .pn-price-line { margin: 7px 0 6px; }
    #pn-plans .pn-landing-plan .pn-price-line strong { font-size: 28px; }
    #pn-plans .pn-landing-plan .pn-price-line span { font-size: 8.5px; }
    #pn-plans .pn-landing-plan > p {
        min-height: 0;
        margin-bottom: 8px;
        font-size: clamp(8.5px, 2.4vw, 10px);
        line-height: 1.4;
    }

    #pn-plans .pn-plan-token-stat {
        margin: 0 0 8px;
        padding: 8px 0;
        gap: 5px;
    }

    #pn-plans .pn-plan-token-stat strong { font-size: 15px; }
    #pn-plans .pn-plan-token-stat span { font-size: 8.5px; }

    #pn-plans .pn-landing-plan ul {
        min-height: 0;
        margin: 0;
        padding: 0 0 8px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: clamp(4px, .85dvh, 7px);
        flex: 1 1 auto;
        overflow: hidden;
    }

    #pn-plans .pn-landing-plan li {
        min-width: 0;
        gap: 6px;
        font-size: clamp(8px, 2.25vw, 9.5px);
        line-height: 1.28;
    }

    #pn-plans .pn-landing-plan li .pn-icon-svg {
        width: 12px;
        height: 12px;
        margin-top: 1px;
        flex: 0 0 12px;
    }

    #pn-plans .pn-landing-plan .pn-btn {
        min-height: 43px;
        margin-top: auto;
        padding: 0 12px;
        font-size: 11px;
        flex: 0 0 auto;
    }

    /* Final slide. */
    .pn-final-cta.pn-landing-slide {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0;
    }

    .pn-final-cta .pn-brand-mark {
        width: 54px;
        height: 54px;
        margin-bottom: 16px;
        border-radius: 18px;
    }

    .pn-final-cta h2 { max-width: 100%; }
    .pn-final-cta p { margin-bottom: 20px; font-size: var(--pn-mobile-copy); }

    /* The progress rail has its own unobtrusive base so copy can never visually
       collide with it, even when browser chrome shortens the visual viewport. */
    .pn-landing-progress {
        bottom: max(13px, calc(env(safe-area-inset-bottom) + 9px));
        max-width: calc(100vw - 150px);
        padding: 5px 7px;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 999px;
        background: rgba(8,10,16,.58);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .pn-landing-progress-dot {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
    }

    .pn-landing-progress-dot.is-active { width: 32px; flex-basis: 32px; }

    .pn-landing-scroll-hint {
        bottom: max(13px, calc(env(safe-area-inset-bottom) + 9px));
        min-height: 29px;
        padding: 5px 8px;
    }

    /* Generic mobile containment for guest/auth and logged-in app surfaces. */
    .pn-auth-shell,
    .pn-modal-content,
    .pn-action-sheet,
    .pn-app-shell,
    .pn-hub-view,
    .pn-profile-form,
    .pn-settings-card,
    .pn-membership-card,
    .pn-credit-pack-card {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .pn-auth-main,
    .pn-hub-view,
    .pn-profile-form {
        overflow-x: hidden;
    }

    img, svg { max-width: 100%; }
}

/* Short mobile viewports (Chrome browser UI visible, landscape-ish phones,
   accessibility zoom): compact further rather than crop. */
@media (max-width: 760px) and (max-height: 720px) {
    .pn-landing {
        --pn-mobile-slide-top: 13px;
        --pn-mobile-controls-h: calc(52px + env(safe-area-inset-bottom));
    }

    .pn-landing-nav,
    .pn-landing-stage { }

    .pn-landing-copy h1 { font-size: clamp(32px, 9.6vw, 41px); margin-bottom: 10px; }
    .pn-landing-copy > p { font-size: 11.5px; line-height: 1.42; }
    .pn-landing .pn-guest-actions { margin-top: 13px; }
    .pn-landing .pn-guest-actions .pn-btn { min-height: 43px; }
    .pn-landing-proof { margin-top: 11px; }

    .pn-landing-section h2,
    .pn-token-copy h2,
    .pn-audience-section h2,
    #pn-plans .pn-landing-section-head h2,
    #pn-credits .pn-token-copy h2 { font-size: clamp(24px, 6.9vw, 30px); }

    .pn-landing-section-head { margin-bottom: 10px; }
    .pn-landing-section-head p,
    .pn-token-copy > p,
    .pn-audience-section > div:first-child > p { font-size: 10.5px; line-height: 1.4; }

    #pn-modes .pn-mode-icon { width: 42px; height: 42px; margin-bottom: 9px; }
    #pn-modes .pn-mode-story h3 { font-size: 19px; }
    #pn-modes .pn-mode-story p { font-size: 10px; }
    #pn-modes .pn-mode-story li { font-size: 8px; }

    #pn-credits { gap: 9px; }
    #pn-credits .pn-token-flow { margin-top: 9px; }
    #pn-credits .pn-credit-pack-preview { padding: 7px; }
    #pn-credits .pn-credit-pack-preview article > span { width: 27px; height: 27px; }

    #pn-plans .pn-landing-plan { padding: 12px 14px; }
    #pn-plans .pn-landing-plan h3 { font-size: 17px; }
    #pn-plans .pn-landing-plan .pn-price-line strong { font-size: 24px; }
    #pn-plans .pn-plan-token-stat { padding: 6px 0; margin-bottom: 6px; }
    #pn-plans .pn-landing-plan ul { gap: 3px; padding-bottom: 5px; }
    #pn-plans .pn-landing-plan li { font-size: 7.8px; }
    #pn-plans .pn-landing-plan .pn-btn { min-height: 38px; }
}

/* Very narrow phones keep comfortable edge padding while avoiding button/card
   overflow. */
@media (max-width: 390px) {
    .pn-landing { --pn-mobile-slide-x: 16px; }
    .pn-landing-brand small { display: none; }
    .pn-landing .pn-guest-actions { grid-template-columns: 1fr; gap: 7px; }
    .pn-landing .pn-guest-actions .pn-btn { min-height: 43px; }
    .pn-landing-copy h1 { font-size: clamp(34px, 10.4vw, 41px); }
    #pn-modes .pn-mode-story { flex-basis: 80vw; }
    #pn-plans .pn-landing-plan { flex-basis: 84vw; }
    .pn-landing-progress { max-width: calc(100vw - 125px); gap: 4px; }
    .pn-landing-scroll-hint span { display: none; }
}

/* ========================================================================== 
   Nudjee 2.11.4 — quieter connection field + contained mobile hero
   ========================================================================== */

/* Ambient nodes should support the copy, not compete with it. */
.pn-network-orb {
    opacity: .28;
    filter: blur(.5px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 16px 46px rgba(0,0,0,.12);
}

.pn-network-orb::before { opacity: .16; }
.pn-network-orb::after { opacity: .12; }

/* Connection handshakes: two small points appear, a dotted path grows from
   one to the other, holds briefly, then the whole connection dissolves. */
.pn-network-link {
    --pn-link-angle: 0deg;
    height: 2px;
    opacity: 0;
    overflow: visible;
    transform: rotate(var(--pn-link-angle));
    transform-origin: left center;
    clip-path: inset(-14px 100% -14px -14px);
    background: radial-gradient(circle, rgba(255,255,255,.72) 0 1.15px, transparent 1.65px) left center / 13px 100% repeat-x;
    animation: pnConnectionHandshake 6.8s cubic-bezier(.35,.02,.2,1) infinite;
}

.pn-network-link::before,
.pn-network-link::after {
    content: "";
    position: absolute;
    top: 50%;
    inset: auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    box-shadow: 0 0 0 4px rgba(255,255,255,.055), 0 0 16px rgba(255,255,255,.22);
    opacity: .88;
    animation: none;
}

.pn-network-link::before { left: -4px; }
.pn-network-link::after { right: -4px; }

.pn-network-link.link-one {
    --pn-link-angle: 10deg;
    animation-delay: -1.1s;
}
.pn-network-link.link-two {
    --pn-link-angle: -23deg;
    animation-delay: -3.7s;
}
.pn-network-link.link-three {
    --pn-link-angle: 122deg;
    animation-delay: -5.2s;
}
.pn-network-link.link-four {
    --pn-link-angle: -32deg;
    animation-delay: -2.2s;
}

@keyframes pnConnectionHandshake {
    0%, 7% {
        opacity: 0;
        clip-path: inset(-14px 100% -14px -14px);
    }
    12% {
        opacity: .22;
        clip-path: inset(-14px 92% -14px -14px);
    }
    42% {
        opacity: .55;
        clip-path: inset(-14px -14px -14px -14px);
    }
    62% {
        opacity: .55;
        clip-path: inset(-14px -14px -14px -14px);
    }
    83%, 100% {
        opacity: 0;
        clip-path: inset(-14px -14px -14px -14px);
    }
}

@media (max-width: 760px) {
    .pn-landing-network {
        opacity: .72;
    }

    .pn-network-orb {
        opacity: .16;
        filter: blur(.8px);
    }

    .pn-network-orb.orb-one { width: 62px; height: 62px; left: -5%; top: 19%; }
    .pn-network-orb.orb-two { width: 54px; height: 54px; left: 7%; top: 68%; }
    .pn-network-orb.orb-three { width: 76px; height: 76px; right: -5%; top: 24%; }
    .pn-network-orb.orb-four { width: 46px; height: 46px; right: 12%; top: 73%; }

    .pn-network-link {
        opacity: 0;
        background-size: 11px 100%;
    }

    .pn-network-link::before,
    .pn-network-link::after {
        width: 6px;
        height: 6px;
        margin-top: -3px;
        box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 0 12px rgba(255,255,255,.16);
    }

    /* The hero gets two explicit rows: conversion content first, then a
       completely contained mini app preview. Nothing sits behind the CTA or
       trust chips anymore. */
    .pn-landing-hero.pn-landing-slide {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(108px, 15dvh);
        align-content: center;
        align-items: stretch;
        justify-content: stretch;
        gap: clamp(10px, 1.8dvh, 16px);
        text-align: left;
    }

    .pn-landing-copy {
        position: relative;
        z-index: 4;
        align-self: center;
    }

    .pn-landing-copy h1 {
        margin: 6px 0 12px;
        font-size: clamp(33px, 9.8vw, 43px);
        line-height: .985;
    }

    .pn-landing-copy > p {
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.45;
    }

    .pn-landing .pn-guest-actions {
        margin-top: 15px;
    }

    .pn-landing-proof {
        position: relative;
        z-index: 5;
        width: 100%;
        margin: 12px 0 0;
        padding: 0;
        gap: 6px;
    }

    .pn-landing-proof span {
        padding: 6px 8px;
        border-color: rgba(255,255,255,.13);
        background: rgba(10,12,18,.46);
        color: rgba(255,255,255,.82);
        font-size: 8.5px;
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
    }

    .pn-landing-proof .pn-icon-svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .pn-landing-device {
        position: relative !important;
        z-index: 3;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100%;
        min-height: 108px !important;
        max-height: 142px;
        margin: 0;
        padding: 8px 10px;
        justify-self: stretch;
        align-self: stretch;
        border-radius: 22px;
        opacity: .68 !important;
        transform: none !important;
        pointer-events: none;
        overflow: hidden;
        background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 34px rgba(0,0,0,.16);
    }

    .pn-landing-device::before {
        inset: 5px;
        border-radius: 17px;
    }

    .pn-device-top {
        width: 54%;
        min-height: 31px;
        padding: 2px 3px;
        gap: 5px;
        font-size: 7.5px;
    }

    .pn-device-top .pn-brand-mark-small {
        width: 25px;
        height: 25px;
        border-radius: 9px;
    }

    .pn-device-top .pn-brand-mark-small .pn-icon-svg {
        width: 13px;
        height: 13px;
    }

    .pn-device-top i {
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0 3px rgba(30,197,142,.12);
    }

    .pn-device-mode {
        width: 52%;
        margin: 2px 0 0;
        padding: 3px;
        border-radius: 10px;
        gap: 2px;
    }

    .pn-device-mode span {
        padding: 5px 2px;
        border-radius: 7px;
        font-size: 6px;
    }

    .pn-device-radar {
        position: absolute;
        top: 7px;
        right: 7px;
        width: 43%;
        height: calc(100% - 14px) !important;
        margin: 0;
        border-radius: 15px;
    }

    .pn-device-radar .pn-radar-ring.r1 { width: 42px; height: 42px; }
    .pn-device-radar .pn-radar-ring.r2 { width: 78px; height: 78px; }
    .pn-device-radar .pn-radar-ring.r3 { width: 116px; height: 116px; }

    .pn-device-radar .pn-radar-you {
        width: 28px;
        height: 28px;
        left: calc(50% - 14px);
        top: calc(50% - 14px);
        border-width: 2px;
        font-size: 7px;
    }

    .pn-device-radar .pn-radar-person {
        width: 24px;
        height: 24px;
        border-width: 2px;
        font-size: 6px;
    }

    .pn-device-radar .pn-radar-person.p1 { top: 12px; right: 14px; }
    .pn-device-radar .pn-radar-person.p2 { left: 12px; bottom: 11px; }
    .pn-device-card,
    .pn-device-note { display: none !important; }
}

/* On short Chrome viewports we preserve all hero information by shrinking the
   preview rather than letting it collide with the progress rail. */
@media (max-width: 760px) and (max-height: 720px) {
    .pn-landing-hero.pn-landing-slide {
        grid-template-rows: auto minmax(88px, 12dvh);
        gap: 8px;
    }

    .pn-landing-copy h1 {
        font-size: clamp(30px, 9vw, 38px);
        margin-bottom: 8px;
    }

    .pn-landing-copy > p {
        font-size: 10.5px;
        line-height: 1.38;
    }

    .pn-landing .pn-guest-actions { margin-top: 10px; }
    .pn-landing .pn-guest-actions .pn-btn { min-height: 39px; }
    .pn-landing-proof { margin-top: 8px; }
    .pn-landing-proof span { padding-block: 5px; font-size: 7.8px; }

    .pn-landing-device {
        min-height: 88px !important;
        max-height: 105px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-network-link {
        animation: none !important;
        opacity: .18;
        clip-path: inset(-14px -14px -14px -14px);
    }
}


/* 2.11.5 plan-first signup + no-scroll mobile trust row */
.pn-register-details[hidden] {
    display: none !important;
}

.pn-register-details.is-ready {
    animation: pnRegisterReveal .24s ease both;
}

.pn-register-step-head {
    margin: 2px 0 16px;
    padding-top: 18px;
    border-top: 1px solid var(--pn-line);
}

.pn-register-step-head .pn-eyebrow {
    margin-bottom: 5px;
}

.pn-register-step-head > strong {
    display: block;
    color: var(--pn-ink);
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.025em;
}

@keyframes pnRegisterReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
    .pn-landing-proof {
        width: 100% !important;
        max-width: 100% !important;
        margin: 11px 0 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: clamp(3px, 1.2vw, 6px) !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        scrollbar-width: auto !important;
    }

    .pn-landing-proof span {
        min-width: 0 !important;
        width: 100%;
        padding: clamp(5px, 1.35vw, 7px) clamp(3px, 1.15vw, 6px) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: clamp(2px, .8vw, 5px) !important;
        border-radius: 999px;
        overflow: hidden;
        color: rgba(255,255,255,.88) !important;
        font-size: clamp(6.4px, 2.08vw, 8.6px) !important;
        line-height: 1.12 !important;
        font-weight: 760;
        letter-spacing: -.01em;
        white-space: nowrap !important;
        text-align: center;
    }

    .pn-landing-proof .pn-icon-svg {
        width: clamp(9px, 2.65vw, 13px) !important;
        height: clamp(9px, 2.65vw, 13px) !important;
        flex: 0 0 clamp(9px, 2.65vw, 13px) !important;
    }
}

@media (max-width: 360px) {
    .pn-landing-proof {
        gap: 3px !important;
    }

    .pn-landing-proof span {
        padding-inline: 3px !important;
        font-size: clamp(5.8px, 1.95vw, 7px) !important;
    }

    .pn-landing-proof .pn-icon-svg {
        width: 9px !important;
        height: 9px !important;
        flex-basis: 9px !important;
    }
}

/* =========================================================
   2.12.0 — Circles: interest communities and group chat
   ========================================================= */
.pn-bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pn-circles-view {
    padding: 0 22px 30px;
}

.pn-circles-toolbar {
    padding: 24px 2px 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.pn-circles-toolbar > div {
    max-width: 620px;
}

.pn-circles-toolbar h2 {
    margin: 5px 0 7px;
    color: var(--pn-ink);
    font-size: clamp(27px, 4vw, 38px);
    line-height: 1;
    letter-spacing: -.045em;
}

.pn-circles-toolbar p {
    margin: 0;
    color: var(--pn-muted);
    font-size: 12px;
    line-height: 1.55;
}

.pn-circle-filter-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -22px 18px;
    padding: 10px 22px 12px;
    border-bottom: 1px solid var(--pn-line);
    background: rgba(251, 251, 253, .94);
    backdrop-filter: blur(16px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.pn-circle-search .pn-input {
    min-height: 43px;
    border-radius: 14px;
    background: white;
}

.pn-circle-scope {
    padding: 3px;
    border-radius: 13px;
    background: #eceef3;
    display: flex;
    gap: 3px;
}

.pn-circle-scope button {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #737682;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.pn-circle-scope button.is-active {
    color: var(--pn-mode-accent, var(--pn-primary));
    background: white;
    box-shadow: 0 5px 16px rgba(25, 27, 35, .08);
}

.pn-circles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pn-circle-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--pn-line);
    border-radius: 22px;
    background: white;
    box-shadow: 0 8px 24px rgba(28, 24, 40, .045);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pn-circle-card:hover,
.pn-circle-card:focus-visible {
    transform: translateY(-2px);
    outline: none;
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 35%, var(--pn-line));
    box-shadow: var(--pn-shadow-sm);
}

.pn-circle-card.is-joined {
    background: linear-gradient(145deg, color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 4%, white), white 45%);
}

.pn-circle-card-top {
    min-height: 46px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.pn-circle-avatar,
.pn-circle-chat-emoji {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    display: grid;
    place-items: center;
    font-size: 21px;
}

.pn-circle-card-meta {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-circle-card-meta small {
    color: var(--pn-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pn-circle-card-meta i {
    width: fit-content;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    color: var(--pn-mode-accent, var(--pn-primary));
    font-size: 7px;
    font-style: normal;
    font-weight: 850;
}

.pn-circle-unread {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pn-mode-accent, var(--pn-primary));
    color: white;
    display: grid;
    place-items: center;
    font-size: 8px;
}

.pn-circle-card h3 {
    margin: 15px 0 7px;
    color: var(--pn-ink);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.pn-circle-card > p {
    margin: 0;
    color: var(--pn-muted);
    font-size: 10px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pn-circle-tags {
    min-height: 29px;
    margin: 13px 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pn-circle-tags span {
    padding: 5px 7px;
    border-radius: 999px;
    background: #f3f4f7;
    color: #676a76;
    font-size: 8px;
    font-weight: 750;
}

.pn-circle-card footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--pn-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pn-circle-card footer > span {
    color: var(--pn-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 750;
}

.pn-circle-card footer .pn-icon-svg {
    width: 14px;
    height: 14px;
}

.pn-circle-open-button {
    border: 0;
    background: transparent;
    color: var(--pn-mode-accent, var(--pn-primary));
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.pn-circles-empty {
    grid-column: 1 / -1;
    min-height: 280px;
    padding: 32px;
    border: 1px dashed #dcdde5;
    border-radius: 24px;
    background: white;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 13px;
    text-align: center;
}

.pn-circles-empty > span {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: var(--pn-mode-accent, var(--pn-primary));
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    display: grid;
    place-items: center;
}

.pn-circles-empty > span .pn-icon-svg { width: 28px; height: 28px; }
.pn-circles-empty strong { max-width: 430px; color: var(--pn-ink); font-size: 13px; line-height: 1.5; }

.pn-circles-empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 520px) {
    .pn-circles-empty-actions { width: min(100%, 310px); }
    .pn-circles-empty-actions .pn-btn { flex: 1 1 132px; }
}

.pn-circle-create-sheet {
    width: min(100%, 600px);
    max-height: min(92dvh, 820px);
    overflow-y: auto;
}

.pn-circle-create-form {
    margin-top: 18px;
}

.pn-circle-public-note {
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 18%, var(--pn-line));
    border-radius: 16px;
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    display: flex;
    align-items: center;
    gap: 10px;
}

.pn-circle-public-note .pn-icon-svg {
    width: 20px;
    height: 20px;
    color: var(--pn-mode-accent, var(--pn-primary));
}

.pn-circle-public-note span { display: grid; gap: 2px; }
.pn-circle-public-note strong { color: var(--pn-ink); font-size: 10px; }
.pn-circle-public-note small { color: var(--pn-muted); font-size: 8px; line-height: 1.4; }

.pn-circle-chat-overlay {
    z-index: 100060;
}

.pn-circle-chat-shell {
    width: min(100%, 720px);
    height: min(88dvh, 780px);
    max-height: min(88dvh, 780px);
    overflow: hidden;
    border-radius: 28px;
    background: #f6f7fa;
    box-shadow: var(--pn-shadow-lg);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.pn-circle-chat-header {
    min-height: 72px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--pn-line);
    background: rgba(255,255,255,.97);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.pn-circle-chat-header .pn-circle-chat-emoji {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 19px;
}

.pn-circle-chat-header > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-circle-chat-header > div > strong {
    overflow: hidden;
    color: var(--pn-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.pn-circle-chat-header > div > button {
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pn-muted);
    font-size: 8px;
    cursor: pointer;
}

.pn-circle-chat-messages {
    min-height: 0;
    padding: 20px 18px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.pn-circle-message {
    max-width: 84%;
    margin: 8px 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: end;
    gap: 8px;
}

.pn-circle-message.is-continuation {
    margin-top: 3px;
}

.pn-circle-message.is-continuation > div {
    grid-column: 2;
}

.pn-circle-message > img {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    object-fit: cover;
}

.pn-circle-message > div {
    min-width: 0;
}

.pn-circle-message strong {
    margin: 0 0 4px 7px;
    display: block;
    color: #777a86;
    font-size: 8px;
    font-weight: 850;
}

.pn-circle-message p {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e5e6ec;
    border-radius: 16px 16px 16px 5px;
    background: white;
    color: #242630;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pn-circle-message small {
    margin: 4px 7px 0;
    display: block;
    color: #a0a2ab;
    font-size: 7px;
}

.pn-circle-message.is-mine {
    margin-left: auto;
    display: block;
}

.pn-circle-message.is-mine p {
    border-color: transparent;
    border-radius: 16px 16px 5px 16px;
    background: var(--pn-mode-accent, var(--pn-primary));
    color: white;
}

.pn-circle-message.is-mine small {
    text-align: right;
}

.pn-circle-chat-empty {
    min-height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
}

.pn-circle-chat-empty > span { font-size: 34px; }
.pn-circle-chat-empty strong { color: var(--pn-ink); font-size: 13px; }
.pn-circle-chat-empty small { color: var(--pn-muted); font-size: 9px; }

.pn-circle-chat-compose {
    padding: 10px 12px max(11px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--pn-line);
    background: rgba(255,255,255,.98);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: end;
    gap: 8px;
}

.pn-circle-chat-compose textarea {
    width: 100%;
    min-height: 44px;
    max-height: 120px;
    resize: none;
    padding: 11px 13px;
    border: 1px solid #dedfe6;
    border-radius: 16px;
    outline: none;
    background: #f7f8fa;
    color: var(--pn-ink);
    font: inherit;
    font-size: 11px;
    line-height: 1.45;
}

.pn-circle-chat-compose textarea:focus {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 45%, #dedfe6);
    background: white;
}

.pn-circle-chat-compose button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 15px;
    background: var(--pn-mode-accent, var(--pn-primary));
    color: white;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.pn-circle-chat-compose button .pn-icon-svg { width: 19px; height: 19px; }

.pn-circle-members-sheet {
    width: min(100%, 520px);
    max-height: min(82dvh, 700px);
    overflow: hidden;
}

.pn-circle-members-list {
    min-height: 120px;
    max-height: 55dvh;
    margin-top: 16px;
    overflow-y: auto;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: white;
}

.pn-circle-member {
    min-height: 64px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.pn-circle-member + .pn-circle-member { border-top: 1px solid var(--pn-line); }

.pn-circle-member-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.pn-circle-member-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
}

.pn-circle-member-avatar i {
    width: 10px;
    height: 10px;
    position: absolute;
    right: -2px;
    bottom: -2px;
    border: 2px solid white;
    border-radius: 50%;
    background: #21b77b;
}

.pn-circle-member > span:last-child { display: grid; gap: 3px; }
.pn-circle-member strong { color: var(--pn-ink); font-size: 10px; }
.pn-circle-member small { color: var(--pn-muted); font-size: 8px; }

@media (max-width: 860px) {
    .pn-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-inline: 5px;
    }

    .pn-nav-item {
        min-width: 0;
        gap: 3px;
        font-size: 8px;
    }

    .pn-nav-item .pn-icon-svg {
        width: 19px;
        height: 19px;
    }

    .pn-nav-item i {
        right: calc(50% - 15px);
    }

    .pn-circles-view {
        padding: 0 14px 24px;
    }

    .pn-circles-toolbar {
        padding: 19px 2px 14px;
        align-items: flex-start;
    }

    .pn-circles-toolbar h2 { font-size: 29px; }
    .pn-circles-toolbar p { font-size: 10px; }
    .pn-circles-toolbar > .pn-btn { white-space: nowrap; }

    .pn-circle-filter-bar {
        margin-inline: -14px;
        padding-inline: 14px;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pn-circle-scope {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pn-circles-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .pn-circle-card {
        padding: 16px;
        border-radius: 20px;
    }

    .pn-circle-card > p {
        -webkit-line-clamp: 2;
    }

    .pn-circle-tags {
        min-height: 0;
        margin-block: 10px 13px;
    }

    .pn-circle-chat-overlay {
        padding: 0;
        align-items: flex-end;
        top: var(--pn-visual-viewport-offset);
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
    }

    .pn-circle-chat-shell {
        width: 100%;
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
        border-radius: 0;
    }

    .pn-circle-chat-header {
        min-height: 64px;
        padding-top: max(9px, env(safe-area-inset-top));
    }

    .pn-circle-chat-messages {
        padding: 16px 11px 20px;
    }

    .pn-circle-message {
        max-width: 90%;
    }

    .pn-circle-message p {
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .pn-nav-item {
        font-size: 7px;
    }
    .pn-nav-item .pn-icon-svg {
        width: 18px;
        height: 18px;
    }
    .pn-circles-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }
    .pn-circles-toolbar h2 { font-size: 26px; }
    .pn-circles-toolbar p { grid-column: 1 / -1; }
}


/* 2.12.1 mobile discovery modal cleanup + modal handoff polish */
.pn-mobile-discovery-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.pn-mobile-view-area {
    white-space: nowrap;
    font-weight: 800;
}

@media (max-width: 860px) {
    /* The modal header already names the active discovery realm. Remove the
       duplicated heading that belongs to the desktop Nearby panel. */
    #pn-mobile-discovery-body .pn-nearby-heading {
        display: none !important;
    }

    #pn-mobile-discovery-body .pn-nearby-panel {
        padding-top: 16px;
    }

    .pn-mobile-discovery-header {
        gap: 12px;
    }

    .pn-mobile-discovery-header > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .pn-mobile-discovery-header h3 {
        overflow-wrap: anywhere;
    }

    .pn-mobile-discovery-header-actions {
        gap: 8px;
    }

    .pn-mobile-view-area {
        min-height: 38px;
        padding: 0 2px;
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .pn-mobile-discovery-header {
        padding-inline: 16px;
    }

    .pn-mobile-discovery-header h3 {
        font-size: 19px;
    }

    .pn-mobile-view-area {
        font-size: 11px;
    }
}


/* 2.12.2 signup connection-intent step */
.pn-register-intent-step[hidden] {
    display: none !important;
}

.pn-register-intent-step.is-ready {
    animation: pnRegisterReveal .24s ease both;
}

.pn-register-intent-step .pn-register-step-head {
    margin-bottom: 13px;
}

.pn-register-step-head > small {
    display: block;
    margin-top: 5px;
    color: var(--pn-muted);
    font-size: 11px;
    line-height: 1.45;
}

.pn-signup-intent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pn-signup-intent {
    position: relative;
    min-width: 0;
    min-height: 132px;
    padding: 15px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: #fff;
    color: var(--pn-ink);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pn-signup-intent:hover {
    transform: translateY(-2px);
}

.pn-signup-intent > span:nth-child(2) {
    display: grid;
    gap: 5px;
}

.pn-signup-intent strong {
    font-size: 14px;
    line-height: 1.15;
}

.pn-signup-intent small {
    color: var(--pn-muted);
    font-size: 9px;
    line-height: 1.45;
}

.pn-signup-intent-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
}

.pn-signup-intent-icon .pn-icon-svg {
    width: 19px;
    height: 19px;
}

.pn-signup-intent > i {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: #fff;
    color: transparent;
    display: grid;
    place-items: center;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.pn-signup-intent > i .pn-icon-svg {
    width: 13px;
    height: 13px;
}

.pn-signup-intent.is-romance .pn-signup-intent-icon { color: #e83468; background: rgba(255,61,110,.09); }
.pn-signup-intent.is-platonic .pn-signup-intent-icon { color: #7057e8; background: rgba(124,92,255,.09); }
.pn-signup-intent.is-business .pn-signup-intent-icon { color: #10877f; background: rgba(17,156,146,.09); }

.pn-signup-intent.is-selected {
    box-shadow: 0 12px 30px rgba(27,27,39,.08);
}
.pn-signup-intent.is-romance.is-selected { border-color: rgba(255,61,110,.58); background: rgba(255,61,110,.035); }
.pn-signup-intent.is-platonic.is-selected { border-color: rgba(124,92,255,.58); background: rgba(124,92,255,.035); }
.pn-signup-intent.is-business.is-selected { border-color: rgba(17,156,146,.58); background: rgba(17,156,146,.035); }
.pn-signup-intent.is-selected > i { color: #fff; border-color: transparent; }
.pn-signup-intent.is-romance.is-selected > i { background: #ff3d6e; }
.pn-signup-intent.is-platonic.is-selected > i { background: #7c5cff; }
.pn-signup-intent.is-business.is-selected > i { background: #119c92; }

.pn-signup-intent-help {
    margin: 10px 2px 3px;
    color: var(--pn-faint);
    font-size: 9px;
    line-height: 1.45;
}

@media (max-width: 620px) {
    .pn-signup-intent-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pn-signup-intent {
        min-height: 0;
        padding: 12px 46px 12px 12px;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .pn-signup-intent-icon {
        width: 36px;
        height: 36px;
    }

    .pn-signup-intent small {
        font-size: 9px;
    }
}


.pn-signup-intent-continue {
    width: 100%;
    margin-top: 12px;
    justify-content: center;
}

.pn-signup-intent-continue .pn-icon-svg {
    width: 17px;
    height: 17px;
}


/* 2.12.3 desktop landing navigation hardening */
.pn-landing-nav {
    z-index: 10002 !important;
    pointer-events: auto !important;
}

.pn-landing-nav a[data-pn-slide-target],
.pn-landing-nav button {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
    touch-action: manipulation;
}

/* 2.13.0 — mutual-match celebration, screenshot-led mobile discovery/profile, vertical colour system */
:root,
:root[data-nudge-theme="romance"] {
    --pn-primary: #ff3d6e;
    --pn-primary-deep: #e91e55;
    --pn-primary-soft: #fff0f4;
    --pn-primary-highlight: #ff8178;
    --pn-primary-rgb: 255, 61, 110;
    --pn-mode-accent: #ff3d6e;
    --pn-mode-accent-strong: #e91e55;
    --pn-mode-soft: rgba(255, 61, 110, .11);
    --pn-mode-line: rgba(255, 61, 110, .18);
}

:root[data-nudge-theme="platonic"] {
    --pn-primary: #7462f5;
    --pn-primary-deep: #5a47e6;
    --pn-primary-soft: #f1efff;
    --pn-primary-highlight: #a693ff;
    --pn-primary-rgb: 116, 98, 245;
    --pn-mode-accent: #7462f5;
    --pn-mode-accent-strong: #5a47e6;
    --pn-mode-soft: rgba(116, 98, 245, .11);
    --pn-mode-line: rgba(116, 98, 245, .18);
}

:root[data-nudge-theme="business"] {
    --pn-primary: #119c92;
    --pn-primary-deep: #0c7f77;
    --pn-primary-soft: #eaf9f7;
    --pn-primary-highlight: #55cec3;
    --pn-primary-rgb: 17, 156, 146;
    --pn-mode-accent: #119c92;
    --pn-mode-accent-strong: #0c7f77;
    --pn-mode-soft: rgba(17, 156, 146, .11);
    --pn-mode-line: rgba(17, 156, 146, .18);
}

:root[data-nudge-theme="all"] {
    --pn-primary: #5b6072;
    --pn-primary-deep: #454a5b;
    --pn-primary-soft: #f0f1f4;
    --pn-primary-highlight: #858a9b;
    --pn-primary-rgb: 91, 96, 114;
    --pn-mode-accent: #5b6072;
    --pn-mode-accent-strong: #454a5b;
    --pn-mode-soft: rgba(91, 96, 114, .11);
    --pn-mode-line: rgba(91, 96, 114, .17);
}

/* Anything that is a primary platform action now follows the active vertical. */
.pn-btn-primary {
    background: linear-gradient(145deg, var(--pn-primary-highlight), var(--pn-primary) 48%, var(--pn-primary-deep));
    box-shadow: 0 11px 25px rgba(var(--pn-primary-rgb), .23);
}

.pn-btn-primary:hover {
    box-shadow: 0 14px 31px rgba(var(--pn-primary-rgb), .31);
}

.pn-brand-mark,
.pn-map-control-primary {
    background: linear-gradient(145deg, var(--pn-primary-highlight), var(--pn-primary), var(--pn-primary-deep));
    box-shadow: 0 12px 30px rgba(var(--pn-primary-rgb), .25);
}

.pn-eyebrow,
.pn-text-button:not(.is-danger),
.pn-public-intention {
    color: var(--pn-primary-deep);
}

.pn-tag,
.pn-public-intention {
    background-color: var(--pn-primary-soft);
}

/* Match splash ----------------------------------------------------------- */
.pn-match-overlay {
    --pn-match-a: #ff8c7e;
    --pn-match-b: #ff617b;
    --pn-match-c: #ff456d;
    z-index: 100060;
    padding: 18px;
    background: rgba(23, 17, 28, .48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pn-match-overlay[data-connection-mode="platonic"] {
    --pn-match-a: #a997ff;
    --pn-match-b: #806cf7;
    --pn-match-c: #5b49e6;
}

.pn-match-overlay[data-connection-mode="business"] {
    --pn-match-a: #65d8cd;
    --pn-match-b: #20aea3;
    --pn-match-c: #0b827a;
}

.pn-match-splash {
    position: relative;
    width: min(100%, 430px);
    min-height: 680px;
    max-height: min(900px, calc(100dvh - 36px));
    overflow: auto;
    padding: 58px 30px 28px;
    border-radius: 36px;
    color: #fff;
    background:
        radial-gradient(circle at 22% 36%, rgba(255, 255, 255, .18), transparent 22%),
        radial-gradient(circle at 77% 38%, rgba(255, 255, 255, .14), transparent 23%),
        linear-gradient(155deg, var(--pn-match-a), var(--pn-match-b) 52%, var(--pn-match-c));
    box-shadow: 0 32px 90px rgba(23, 13, 35, .35);
    isolation: isolate;
}

.pn-match-splash::before,
.pn-match-splash::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    pointer-events: none;
}

.pn-match-splash::before { left: -82px; top: 245px; }
.pn-match-splash::after { right: -82px; top: 226px; }

.pn-match-back {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 20px;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
}

.pn-match-copy {
    text-align: center;
}

.pn-match-copy .pn-match-spark {
    display: none;
}

.pn-match-copy h2 {
    margin: 20px 0 8px;
    color: #fff;
    font-size: clamp(30px, 7vw, 38px);
    line-height: 1;
    letter-spacing: -.045em;
}

.pn-match-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.5;
}

.pn-match-copy p strong { color: #fff; }

.pn-match-portraits {
    position: relative;
    width: 310px;
    max-width: 100%;
    height: 164px;
    margin: 26px auto 24px;
}

.pn-match-photo {
    position: absolute;
    top: 0;
    width: 158px;
    height: 158px;
    padding: 7px;
    border: 3px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    box-shadow: 0 16px 38px rgba(89, 20, 54, .18), inset 0 0 0 5px rgba(255, 255, 255, .15);
}

.pn-match-photo:first-child { left: 0; }
.pn-match-photo:nth-child(2) { right: 0; }

.pn-match-photo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.pn-match-centre {
    position: absolute;
    z-index: 3;
    top: 48px;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translateX(-50%);
    border: 4px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08));
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 28px rgba(70, 19, 51, .18);
}

.pn-match-centre .pn-icon-svg { width: 29px; height: 29px; }

.pn-match-shared {
    display: grid;
    gap: 10px;
    text-align: center;
}

.pn-match-shared > small {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 650;
}

.pn-match-interest-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pn-match-interest-list span {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 750;
    backdrop-filter: blur(10px);
}

.pn-match-plan-card {
    min-height: 90px;
    margin-top: 25px;
    padding: 18px 18px 18px 20px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 20px;
    background: rgba(255, 255, 255, .68);
    color: #342633;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 16px 40px rgba(75, 23, 53, .1);
    backdrop-filter: blur(18px);
}

.pn-match-plan-card > span:first-child {
    min-width: 0;
    display: grid;
    gap: 5px;
    text-align: left;
}

.pn-match-plan-card strong { font-size: 12px; }
.pn-match-plan-card small { color: #5e4c59; font-size: 11px; line-height: 1.45; }

.pn-match-plan-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.48));
    color: var(--pn-match-c);
    display: grid;
    place-items: center;
}

.pn-match-plan-icon .pn-icon-svg { width: 27px; height: 27px; }

.pn-match-actions {
    margin-top: 28px;
    display: grid;
    gap: 6px;
}

.pn-match-actions .pn-btn-primary {
    min-height: 54px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
    box-shadow: none;
    backdrop-filter: blur(16px);
}

.pn-match-actions .pn-btn-primary:hover { background: rgba(255, 255, 255, .25); box-shadow: none; }
.pn-match-actions .pn-text-button { min-height: 42px; color: #fff !important; opacity: .94; }

/* Incoming nudge refinements. */
.pn-incoming-nudge-note {
    margin: 14px 0 0;
    padding: 13px 15px;
    border: 1px solid var(--pn-mode-line);
    border-radius: 15px;
    background: var(--pn-primary-soft);
    text-align: left;
}

.pn-incoming-nudge-note small {
    color: var(--pn-primary-deep);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
}

.pn-incoming-nudge-note p {
    margin: 5px 0 0;
    color: var(--pn-ink);
    font-size: 11px;
    line-height: 1.5;
}

.pn-nudge-back-button { width: 100%; }

/* Mobile screenshot-led Nearby feed and profile ------------------------- */
@media (max-width: 860px) {
    .pn-mobile-discovery-overlay {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        background: #f7f7fa;
    }

    .pn-mobile-discovery-shell {
        --pn-mobile-mode: #ff3d6e;
        --pn-mobile-mode-deep: #e91e55;
        width: 100% !important;
        max-width: none !important;
        height: var(--pn-visual-viewport-height, 100dvh) !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #f7f7fa;
        display: flex;
        flex-direction: column;
        box-shadow: none !important;
    }

    #pn-mobile-discovery-modal[data-connection-mode="platonic"] .pn-mobile-discovery-shell {
        --pn-mobile-mode: #7462f5;
        --pn-mobile-mode-deep: #5a47e6;
    }

    #pn-mobile-discovery-modal[data-connection-mode="business"] .pn-mobile-discovery-shell {
        --pn-mobile-mode: #119c92;
        --pn-mobile-mode-deep: #0c7f77;
    }

    #pn-mobile-discovery-modal[data-connection-mode="all"] .pn-mobile-discovery-shell {
        --pn-mobile-mode: #5b6072;
        --pn-mobile-mode-deep: #454a5b;
    }

    .pn-mobile-discovery-header {
        position: relative;
        z-index: 3;
        min-height: 174px !important;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 17px !important;
        border: 0 !important;
        color: #fff;
        background:
            radial-gradient(circle at 86% 5%, rgba(255,255,255,.19), transparent 30%),
            linear-gradient(145deg, color-mix(in srgb, var(--pn-mobile-mode) 74%, white), var(--pn-mobile-mode) 58%, var(--pn-mobile-mode-deep));
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: start !important;
        gap: 14px 10px !important;
        overflow: visible;
    }

    .pn-mobile-nearby-title {
        min-width: 0;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .pn-mobile-nearby-spark {
        width: 27px;
        height: 27px;
        margin-top: 1px;
        display: grid;
        place-items: center;
        color: #fff;
    }

    .pn-mobile-nearby-spark .pn-icon-svg { width: 26px; height: 26px; }

    .pn-mobile-discovery-header h3 {
        margin: 0 !important;
        color: #fff !important;
        font-size: 27px !important;
        line-height: 1 !important;
        letter-spacing: -.045em;
    }

    #pn-mobile-discovery-kicker {
        display: block;
        margin-top: 8px;
        color: rgba(255,255,255,.91);
        font-size: 12px;
        line-height: 1.2;
    }

    .pn-mobile-discovery-header-actions {
        gap: 7px !important;
    }

    .pn-mobile-discovery-header-actions .pn-icon-button {
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 13px;
        background: rgba(255,255,255,.11);
        color: #fff;
        display: grid;
        place-items: center;
    }

    .pn-mobile-discovery-header-actions .pn-icon-svg { width: 18px; height: 18px; }

    .pn-mobile-mode-strip {
        grid-column: 1 / -1;
        width: calc(100vw - 36px);
        min-width: 0;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .pn-mobile-mode-strip::-webkit-scrollbar { display: none; }

    .pn-mobile-mode-strip button {
        min-width: max-content;
        min-height: 38px;
        padding: 0 13px;
        border: 1px solid rgba(255,255,255,.31);
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        color: rgba(255,255,255,.91);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 800;
        box-shadow: none;
    }

    .pn-mobile-mode-strip button .pn-icon-svg { width: 15px; height: 15px; }

    .pn-mobile-mode-strip button.is-active,
    .pn-mobile-mode-strip button[aria-pressed="true"] {
        border-color: #fff;
        background: #fff;
        color: var(--pn-mobile-mode);
        box-shadow: 0 8px 20px rgba(51, 23, 45, .13);
    }

    .pn-mobile-discovery-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        background: #f7f7fa !important;
    }

    #pn-mobile-discovery-body .pn-nearby-panel {
        min-height: 100% !important;
        padding: 14px 12px calc(28px + env(safe-area-inset-bottom)) !important;
        background: #f7f7fa !important;
    }

    #pn-mobile-discovery-body .pn-nearby-card,
    #pn-nearby-card.pn-mobile-nearby-feed {
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .pn-mobile-feed-heading {
        margin: 3px 2px 10px;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .pn-mobile-feed-heading > span {
        color: #202126;
        font-size: 14px;
        font-weight: 850;
        letter-spacing: -.025em;
    }

    .pn-mobile-feed-heading > small {
        color: #8b8d98;
        font-size: 9px;
        font-weight: 750;
    }

    .pn-mobile-potential-heading { margin-top: 5px; }

    .pn-mobile-nearby-cards {
        display: grid;
        gap: 12px;
    }

    .pn-mobile-nearby-card {
        --pn-card-mode: #ff3d6e;
        position: relative;
        min-width: 0;
        margin: 0;
        border: 0;
        border-radius: 22px;
        overflow: hidden;
        background: #111;
        box-shadow: 0 12px 28px rgba(25, 22, 35, .12);
        cursor: pointer;
    }

    .pn-mobile-nearby-card.is-platonic { --pn-card-mode: #7462f5; }
    .pn-mobile-nearby-card.is-business { --pn-card-mode: #119c92; }

    .pn-mobile-nearby-photo {
        position: relative;
        width: 100%;
        aspect-ratio: 1.34 / 1;
        min-height: 235px;
        background-position: center 30%;
        background-size: cover;
        isolation: isolate;
    }

    .pn-mobile-photo-shade {
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(12,12,16,.04) 22%, rgba(12,12,16,.08) 52%, rgba(8,8,12,.82) 100%);
    }

    .pn-mobile-mode-badge {
        position: absolute;
        z-index: 3;
        top: 13px;
        left: 13px;
        min-height: 29px;
        padding: 0 10px;
        border-radius: 999px;
        background: var(--pn-card-mode);
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 9px;
        font-weight: 850;
        box-shadow: 0 6px 16px rgba(15, 15, 20, .16);
    }

    .pn-mobile-mode-badge .pn-icon-svg { width: 13px; height: 13px; }

    .pn-mobile-person-meta {
        position: absolute;
        z-index: 3;
        right: 72px;
        bottom: 15px;
        left: 15px;
        color: #fff;
        display: grid;
        gap: 4px;
    }

    .pn-mobile-person-meta strong {
        color: #fff;
        font-size: 22px;
        line-height: 1;
        letter-spacing: -.045em;
        text-shadow: 0 2px 12px rgba(0,0,0,.24);
    }

    .pn-mobile-person-meta small {
        color: rgba(255,255,255,.9);
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        line-height: 1.25;
    }

    .pn-mobile-person-meta .pn-icon-svg { width: 13px; height: 13px; color: var(--pn-card-mode); }

    .pn-mobile-nudge-heart {
        position: absolute;
        z-index: 4;
        right: 14px;
        bottom: 14px;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: var(--pn-card-mode);
        display: grid;
        place-items: center;
        box-shadow: 0 9px 22px rgba(5,5,9,.22);
    }

    .pn-mobile-nudge-heart .pn-icon-svg { width: 23px; height: 23px; }

    .pn-mobile-nudged-you { margin-bottom: 14px; }

    .pn-mobile-nudged-row {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        padding: 1px 1px 5px;
        scrollbar-width: none;
    }

    .pn-mobile-nudged-row::-webkit-scrollbar { display: none; }

    .pn-mobile-nudged-pill {
        --pn-pill-mode: #ff3d6e;
        min-width: 132px;
        padding: 9px;
        border: 1px solid rgba(26,27,34,.08);
        border-radius: 17px;
        background: #fff;
        color: #22232a;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 8px;
        text-align: left;
        box-shadow: 0 6px 18px rgba(25,22,35,.06);
    }

    .pn-mobile-nudged-pill.is-platonic { --pn-pill-mode: #7462f5; }
    .pn-mobile-nudged-pill.is-business { --pn-pill-mode: #119c92; }

    .pn-mobile-nudged-pill > span {
        grid-row: 1 / 3;
        width: 38px;
        height: 38px;
        border: 2px solid color-mix(in srgb, var(--pn-pill-mode) 60%, white);
        border-radius: 50%;
        background-position: center;
        background-size: cover;
    }

    .pn-mobile-nudged-pill strong {
        align-self: end;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
    }

    .pn-mobile-nudged-pill small { color: var(--pn-pill-mode); font-size: 8px; font-weight: 800; }

    .pn-mobile-nearby-empty {
        min-height: 390px;
        padding: 40px 24px;
        border: 1px solid rgba(28,29,35,.07);
        border-radius: 24px;
        background: #fff;
        text-align: center;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 11px;
    }

    .pn-mobile-nearby-empty > span { color: var(--pn-mobile-mode); }
    .pn-mobile-nearby-empty > strong { font-size: 16px; }
    .pn-mobile-nearby-empty > small { max-width: 280px; color: #7e808b; font-size: 10px; line-height: 1.5; }

    /* Full-screen profile, styled like the supplied mobile reference. */
    #pn-public-profile-modal.pn-mobile-public-profile-modal {
        z-index: 100050;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        background: #0d0e12;
    }

    #pn-public-profile-modal.pn-mobile-public-profile-modal .pn-profile-sheet {
        position: relative;
        width: 100% !important;
        max-width: none !important;
        height: var(--pn-visual-viewport-height, 100dvh) !important;
        max-height: none !important;
        min-height: 100dvh;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #fff;
        text-align: left;
        box-shadow: none !important;
    }

    #pn-public-profile-modal.pn-mobile-public-profile-modal .pn-profile-sheet > .pn-sheet-close {
        display: none !important;
    }

    #pn-public-profile-modal.pn-mobile-public-profile-modal #pn-public-profile-content {
        width: 100%;
        height: 100%;
    }

    .pn-mobile-profile-screen {
        --pn-profile-mode: #ff3d6e;
        width: 100%;
        height: 100%;
        min-height: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .pn-mobile-profile-screen.is-platonic { --pn-profile-mode: #7462f5; }
    .pn-mobile-profile-screen.is-business { --pn-profile-mode: #119c92; }

    .pn-mobile-profile-hero {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        background-position: center 28%;
        background-size: cover;
        isolation: isolate;
    }

    .pn-mobile-profile-shade {
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(5,6,9,.26) 0%, transparent 28%, transparent 48%, rgba(5,6,9,.72) 86%, rgba(5,6,9,.88) 100%);
    }

    .pn-mobile-profile-back {
        position: absolute;
        z-index: 4;
        top: calc(15px + env(safe-area-inset-top, 0px));
        left: 15px;
        width: 43px;
        height: 43px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 50%;
        background: rgba(13,14,18,.24);
        color: #fff;
        font-size: 35px;
        font-weight: 300;
        line-height: .9;
        display: grid;
        place-items: center;
        backdrop-filter: blur(8px);
    }

    .pn-mobile-profile-identity {
        position: absolute;
        z-index: 3;
        right: 18px;
        bottom: 70px;
        left: 18px;
        color: #fff;
        display: grid;
        gap: 5px;
    }

    .pn-mobile-profile-identity h2 {
        margin: 0;
        color: #fff;
        font-size: 27px;
        line-height: 1;
        letter-spacing: -.045em;
        text-shadow: 0 2px 14px rgba(0,0,0,.22);
    }

    .pn-mobile-profile-identity small,
    .pn-mobile-profile-identity em {
        color: rgba(255,255,255,.92);
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        font-style: normal;
        font-weight: 650;
        line-height: 1.3;
    }

    .pn-mobile-profile-identity small .pn-icon-svg { width: 13px; height: 13px; color: var(--pn-profile-mode); }

    .pn-mobile-profile-chips {
        position: absolute;
        z-index: 3;
        right: 15px;
        bottom: 20px;
        left: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .pn-mobile-profile-chips span {
        min-height: 31px;
        padding: 0 10px;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 999px;
        background: rgba(15,15,20,.48);
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 9px;
        font-weight: 750;
        backdrop-filter: blur(10px);
    }

    .pn-mobile-profile-chips .pn-icon-svg { width: 13px; height: 13px; }

    .pn-mobile-profile-nudge-sheet {
        position: relative;
        z-index: 5;
        flex: 0 0 auto;
        margin-top: -2px;
        padding: 23px 20px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: 28px 28px 0 0;
        background: #fff;
        color: #1d1e24;
        box-shadow: 0 -10px 30px rgba(13,14,18,.08);
    }

    .pn-mobile-profile-nudge-copy h3 {
        margin: 0;
        color: #1d1e24;
        font-size: 20px;
        line-height: 1.12;
        letter-spacing: -.035em;
    }

    .pn-mobile-profile-nudge-copy p {
        margin: 9px 0 18px;
        color: #5d606c;
        font-size: 11px;
        line-height: 1.5;
    }

    .pn-mobile-profile-action {
        width: 100%;
        min-height: 52px;
        border-radius: 999px;
        background: linear-gradient(145deg, color-mix(in srgb, var(--pn-profile-mode) 64%, white), var(--pn-profile-mode));
        box-shadow: 0 10px 24px color-mix(in srgb, var(--pn-profile-mode) 24%, transparent);
    }

    .pn-mobile-profile-action:disabled {
        background: #e7e7eb;
        color: #898b94 !important;
        box-shadow: none;
    }

    .pn-mobile-profile-note-toggle {
        width: 100%;
        min-height: 43px;
        margin-top: 9px;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: #f5f3f5;
        color: #747681;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-size: 10px;
        font-weight: 700;
    }

    .pn-mobile-profile-note-toggle.is-open { color: var(--pn-profile-mode); background: color-mix(in srgb, var(--pn-profile-mode) 8%, white); }

    .pn-mobile-profile-note-field {
        margin-top: 9px;
        padding: 10px;
        border: 1px solid color-mix(in srgb, var(--pn-profile-mode) 20%, #e6e6ec);
        border-radius: 15px;
        background: #fafafd;
    }

    .pn-mobile-profile-note-field[hidden] { display: none !important; }

    .pn-mobile-profile-note-field textarea {
        width: 100%;
        min-height: 55px;
        padding: 8px 9px;
        border: 0;
        outline: 0;
        resize: none;
        background: transparent;
        color: #23242a;
        font-size: 11px;
        line-height: 1.45;
    }

    .pn-mobile-profile-note-field small {
        display: block;
        padding: 2px 9px 0;
        color: #8a8c96;
        font-size: 8px;
        line-height: 1.4;
    }

    /* Match becomes a genuine full-screen celebration on phones. */
    .pn-match-overlay {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        background: transparent;
        backdrop-filter: none;
    }

    .pn-match-splash {
        width: 100%;
        max-width: none;
        height: var(--pn-visual-viewport-height, 100dvh);
        min-height: 100dvh;
        max-height: none;
        padding: calc(76px + env(safe-area-inset-top, 0px)) 22px calc(19px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: none;
    }

    .pn-match-back {
        top: calc(12px + env(safe-area-inset-top, 0px));
        left: 12px;
    }

    .pn-match-copy h2 { margin-top: 0; }
    .pn-match-portraits { flex: 0 0 auto; }
    .pn-match-actions { margin-top: auto; padding-top: 22px; }
}

@media (max-width: 430px) {
    .pn-match-portraits { width: 286px; height: 151px; }
    .pn-match-photo { width: 146px; height: 146px; }
    .pn-match-centre { top: 43px; width: 61px; height: 61px; }
    .pn-match-copy h2 { font-size: 30px; }
    .pn-match-plan-card { min-height: 82px; padding: 15px; }
    .pn-match-plan-icon { width: 52px; height: 52px; }
    .pn-mobile-nearby-photo { min-height: 220px; }
}

@media (max-width: 370px) {
    .pn-mobile-discovery-header { min-height: 164px !important; padding-inline: 14px !important; }
    .pn-mobile-mode-strip { width: calc(100vw - 28px); }
    .pn-mobile-nearby-photo { min-height: 205px; }
    .pn-mobile-person-meta strong { font-size: 20px; }
    .pn-match-splash { padding-inline: 17px; }
    .pn-match-portraits { width: 265px; height: 140px; }
    .pn-match-photo { width: 136px; height: 136px; }
    .pn-match-centre { top: 39px; width: 58px; height: 58px; }
}

/* 2.13.0 vertical-colour hardening: core signed-in interaction chrome follows the active connection mode. */
.pn-input:focus,
.pn-report-field select:focus,
.pn-report-field textarea:focus {
    border-color: rgba(var(--pn-primary-rgb), .5) !important;
    box-shadow: 0 0 0 4px rgba(var(--pn-primary-rgb), .08) !important;
}

.pn-msg-sent,
.pn-onboarding-progress span.is-active,
.pn-onboarding-progress span.is-complete,
.pn-upgrade-icon,
.pn-walk-reminder-icon {
    background: linear-gradient(145deg, var(--pn-primary-highlight), var(--pn-primary) 52%, var(--pn-primary-deep));
}

.pn-walk-reminder-icon {
    box-shadow: 0 18px 38px rgba(var(--pn-primary-rgb), .28);
}

.pn-walk-reminder-ring {
    border-color: rgba(var(--pn-primary-rgb), .18);
}

.pn-face-marker > div {
    outline-color: rgba(var(--pn-primary-rgb), .62);
}

.pn-incoming-marker > div {
    border-color: var(--pn-primary) !important;
    box-shadow: 0 0 0 5px rgba(var(--pn-primary-rgb), .16), 0 8px 20px rgba(35, 30, 45, .2) !important;
}

.pn-incoming-nearby-card,
.pn-hotspot-nudged,
.pn-conv-item.is-pinned,
.pn-unread-bold,
.pn-public-prompt {
    border-color: rgba(var(--pn-primary-rgb), .2);
    background: linear-gradient(145deg, var(--pn-primary-soft), #fff);
}

.pn-incoming-nearby-card:hover {
    border-color: rgba(var(--pn-primary-rgb), .38);
}

.pn-quality-tag {
    color: var(--pn-primary-deep);
    background: var(--pn-primary-soft);
}

/* =========================================================
   2.14.0 — reference-led Circles, reactions, match rail,
   meetup cards and modal-layer corrections
   ========================================================= */

/* Chats: keep mutual matches visually separate from real threads. */
.pn-chats-community-view {
    padding: 18px 18px 28px;
}

.pn-mutual-match-section {
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--pn-line);
}

.pn-mutual-match-section[hidden] { display: none !important; }

.pn-chat-section-heading {
    margin: 0 0 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pn-chat-section-heading > div {
    display: grid;
    gap: 3px;
}

.pn-chat-section-heading strong {
    color: var(--pn-ink);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.015em;
}

.pn-chat-section-heading small {
    color: var(--pn-muted);
    font-size: 8px;
    line-height: 1.35;
}

.pn-conversation-heading { margin-top: 3px; }

.pn-mutual-matches {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 3px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.pn-mutual-matches::-webkit-scrollbar { display: none; }

.pn-mutual-match {
    width: 66px;
    flex: 0 0 66px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pn-ink);
    cursor: pointer;
    display: grid;
    justify-items: center;
    gap: 6px;
}

.pn-mutual-match-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border: 2px solid white;
    border-radius: 19px;
    background: #eef0f4 center / cover no-repeat;
    box-shadow: 0 6px 17px rgba(35, 28, 49, .13);
}

.pn-mutual-match-avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,81,118,.58), rgba(255,139,113,.18));
}

.pn-mutual-match-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 13px;
    height: 13px;
    border: 3px solid white;
    border-radius: 50%;
    background: #ff4b78;
}

.pn-mutual-match-dot.is-platonic { background: #7462f5; }
.pn-mutual-match-dot.is-business { background: #18a79b; }
.pn-mutual-match-dot.is-romance { background: #ff4b78; }

.pn-mutual-match strong {
    width: 100%;
    overflow: hidden;
    color: #4d4f59;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 850;
    text-align: center;
}

/* Circles screen: pink header, search, chips and photo-card rhythm from reference. */
.pn-circles-reference-view {
    min-height: 100%;
    padding: 0 0 34px;
    background: linear-gradient(180deg, #fff7f8 0, #fff 235px, #fff 100%);
}

.pn-circles-reference-hero {
    position: relative;
    margin: 0;
    padding: 24px 20px 17px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% -10%, rgba(255,255,255,.25), transparent 36%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg, #ff4d82 0%, #ff6b78 51%, #ff9b7f 100%);
}

.pn-circles-reference-hero::before,
.pn-circles-reference-hero::after {
    content: '';
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    pointer-events: none;
}

.pn-circles-reference-hero::before { left: -86px; top: -98px; }
.pn-circles-reference-hero::after { right: -115px; top: -102px; }

.pn-circles-reference-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pn-circles-reference-title .pn-eyebrow {
    color: rgba(255,255,255,.8);
    font-size: 7px;
    letter-spacing: .13em;
}

.pn-circles-reference-title h2 {
    margin: 1px 0 12px;
    color: white;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.045em;
}

.pn-circles-create-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: white;
    box-shadow: 0 7px 17px rgba(121, 25, 54, .16);
    font-size: 23px;
    font-weight: 350;
    line-height: 1;
    cursor: pointer;
}

.pn-circle-search-reference {
    position: relative;
    z-index: 2;
    display: block;
}

.pn-circle-search-reference .pn-circle-search-glyph {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #999aa1;
    font-size: 18px;
    pointer-events: none;
}

.pn-circle-search-reference .pn-input {
    width: 100%;
    min-height: 44px;
    padding: 0 15px 0 39px;
    border: 0;
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 9px 21px rgba(130, 38, 65, .12);
    color: #272830;
    font-size: 11px;
}

.pn-circle-category-chips {
    position: relative;
    z-index: 2;
    margin-top: 13px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pn-circle-category-chips::-webkit-scrollbar { display: none; }

.pn-circle-category-chips button {
    min-height: 29px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: #6e6267;
    font-size: 8px;
    font-weight: 780;
    cursor: pointer;
}

.pn-circle-category-chips button.is-active {
    background: #f74472;
    color: white;
    box-shadow: 0 5px 13px rgba(196, 36, 77, .2);
}

.pn-circles-reference-content {
    padding: 17px 16px 0;
}

.pn-circle-showcase-section + .pn-circle-showcase-section { margin-top: 23px; }

.pn-circle-showcase-heading {
    margin: 0 1px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pn-circle-showcase-heading strong {
    color: #25262d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.pn-circle-showcase-heading small {
    color: #ef3f6e;
    font-size: 8px;
    font-weight: 800;
}

.pn-circles-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pn-circle-photo-card {
    position: relative;
    min-height: 174px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #f0e7ea;
    border-radius: 16px;
    background: white;
    box-shadow: 0 7px 18px rgba(39, 27, 45, .07);
    display: block;
}

.pn-circle-photo-card:hover,
.pn-circle-photo-card:focus-visible {
    transform: translateY(-2px);
    border-color: #f4b5c5;
    box-shadow: 0 12px 26px rgba(66, 37, 49, .10);
}

.pn-circle-photo-cover {
    position: relative;
    height: 97px;
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.pn-circle-photo-cover::before,
.pn-circle-detail-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(145deg, #8aa1bd, #4e667d);
}

.pn-circle-photo-cover::after,
.pn-circle-detail-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .76;
    background:
        linear-gradient(155deg, transparent 0 46%, rgba(0,0,0,.12) 47% 49%, transparent 50%),
        radial-gradient(ellipse at 50% 110%, rgba(16,25,35,.38), transparent 56%);
}

.pn-circle-photo-cover.is-outdoors::before,
.pn-circle-detail-cover.is-outdoors::before { background: linear-gradient(150deg, #f0aa69, #536c55 58%, #263e46); }
.pn-circle-photo-cover.is-food::before,
.pn-circle-detail-cover.is-food::before { background: radial-gradient(circle at 48% 44%, #ead6ba 0 17%, #9b6c4d 18% 31%, #3e2e2a 32% 35%, transparent 36%), linear-gradient(145deg, #c39b7c, #5b443a); }
.pn-circle-photo-cover.is-arts::before,
.pn-circle-detail-cover.is-arts::before { background: linear-gradient(135deg, #e7b0ab, #83aeb1 52%, #efd2a8); }
.pn-circle-photo-cover.is-fitness::before,
.pn-circle-detail-cover.is-fitness::before { background: linear-gradient(145deg, #ef9f83, #5a7d64 52%, #33424f); }
.pn-circle-photo-cover.is-business::before,
.pn-circle-detail-cover.is-business::before { background: linear-gradient(145deg, #72d2c8, #288c92 52%, #254c63); }
.pn-circle-photo-cover.is-music::before,
.pn-circle-detail-cover.is-music::before { background: linear-gradient(145deg, #ae8ee2, #605e9f 58%, #26344e); }
.pn-circle-photo-cover.is-tech::before,
.pn-circle-detail-cover.is-tech::before { background: linear-gradient(145deg, #76a7d6, #5267ab 58%, #252e59); }
.pn-circle-photo-cover.is-travel::before,
.pn-circle-detail-cover.is-travel::before { background: linear-gradient(145deg, #e5c583, #79aeb4 52%, #416a85); }

.pn-circle-photo-cover > .pn-circle-cover-emoji {
    width: 49px;
    height: 49px;
    border: 1px solid rgba(255,255,255,.54);
    border-radius: 16px;
    background: rgba(255,255,255,.18);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
    backdrop-filter: blur(9px);
    color: white;
    display: grid;
    place-items: center;
    font-size: 25px;
}

.pn-circle-photo-cover .pn-circle-unread {
    position: absolute;
    right: 7px;
    top: 7px;
    background: #f6406e;
    box-shadow: 0 4px 10px rgba(98,20,42,.2);
}

.pn-circle-photo-copy { padding: 9px 10px 10px; }

.pn-circle-photo-card h3 {
    margin: 0 0 5px;
    overflow: hidden;
    color: #25262d;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 900;
}

.pn-circle-photo-copy > small {
    color: #777982;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
}

.pn-circle-photo-copy > small i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #64c985;
}

.pn-circle-photo-members {
    margin-top: 7px;
    color: #9698a0;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 7px;
}

.pn-circle-photo-members .pn-icon-svg { width: 10px; height: 10px; }
.pn-circle-photo-members b { color: #6b6d76; font-size: 7px; }

.pn-circle-joined-mark,
.pn-circle-quick-join {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-height: 20px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 850;
}

.pn-circle-joined-mark {
    background: #fff0f4;
    color: #e93e69;
    display: inline-flex;
    align-items: center;
}

.pn-circle-quick-join {
    background: #f64672;
    color: white;
    cursor: pointer;
}

.pn-circles-empty-reference { margin-top: 12px; }

/* Circle detail screen mirrors the reference's hero / floating mark / white body. */
.pn-circle-detail-overlay {
    z-index: 100055;
    padding: 18px;
}

.pn-circle-detail-shell {
    width: min(100%, 560px);
    max-height: min(92dvh, 790px);
    overflow-y: auto;
    border-radius: 30px;
    background: #fbfafb;
    box-shadow: 0 28px 80px rgba(29, 21, 38, .28);
}

.pn-circle-detail-cover {
    position: relative;
    height: 235px;
    overflow: hidden;
    isolation: isolate;
}

.pn-circle-detail-cover-emoji {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 58px;
    filter: drop-shadow(0 9px 14px rgba(0,0,0,.18));
}

.pn-circle-detail-back {
    position: absolute;
    left: 13px;
    top: 13px;
    z-index: 4;
    border-color: rgba(255,255,255,.3) !important;
    background: rgba(29, 29, 35, .42) !important;
    color: white !important;
    backdrop-filter: blur(8px);
}

.pn-circle-detail-body {
    position: relative;
    margin-top: -1px;
    padding: 18px 20px 25px;
    border-radius: 27px 27px 0 0;
    background: #fbfafb;
}

.pn-circle-detail-identity {
    min-height: 60px;
    display: grid;
    grid-template-columns: 64px minmax(0,1fr);
    gap: 12px;
    align-items: center;
}

.pn-circle-detail-icon {
    width: 64px;
    height: 64px;
    margin-top: -47px;
    border: 4px solid #fbfafb;
    border-radius: 22px;
    background: linear-gradient(145deg, #f54f7b, #ff9c78);
    color: white;
    box-shadow: 0 8px 21px rgba(94,37,58,.16);
    display: grid;
    place-items: center;
    font-size: 30px;
}

.pn-circle-detail-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pn-circle-detail-name-row h2 {
    margin: 0;
    overflow: hidden;
    color: #222329;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 22px;
    letter-spacing: -.035em;
}

.pn-circle-online-pill {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eaf6eb;
    color: #62a064;
    font-size: 7px;
    font-weight: 850;
}

.pn-circle-online-pill i {
    width: 5px;
    height: 5px;
    margin-right: 3px;
    border-radius: 50%;
    background: #6bb86d;
    display: inline-block;
}

.pn-circle-detail-identity small { color: #777983; font-size: 8px; }

.pn-circle-detail-description {
    margin: 13px 0 11px;
    color: #555761;
    font-size: 10px;
    line-height: 1.55;
}

.pn-circle-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pn-circle-detail-tags span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f6e9f5;
    color: #9a56ad;
    font-size: 7px;
    font-weight: 800;
}

.pn-circle-detail-tags span:nth-child(2n) { background: #edf0ff; color: #7068be; }
.pn-circle-detail-tags span:nth-child(3n) { background: #fff0e6; color: #c66a3e; }

.pn-circle-detail-divider { height: 1px; margin: 17px 0; background: #e9e7eb; }

.pn-circle-detail-feature-card {
    min-height: 78px;
    padding: 11px;
    border: 1px solid #eee9ed;
    border-radius: 17px;
    background: white;
    box-shadow: 0 5px 13px rgba(39,27,45,.04);
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
}

.pn-circle-detail-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #f7537d, #ff9a78);
    color: white;
    display: grid;
    place-items: center;
}

.pn-circle-detail-feature-icon .pn-icon-svg { width: 22px; height: 22px; }
.pn-circle-detail-feature-card > span:nth-child(2) { display: grid; gap: 3px; }
.pn-circle-detail-feature-card strong { color: #2f3037; font-size: 9px; }
.pn-circle-detail-feature-card small { color: #8a8c94; font-size: 7px; line-height: 1.4; }

.pn-circle-detail-feature-card button,
.pn-circle-detail-section-title button {
    border: 0;
    background: transparent;
    color: #f04772;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
}

.pn-circle-detail-feature-card button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 11px;
    background: #fff0f4;
}

.pn-circle-detail-activity { margin-top: 19px; }
.pn-circle-detail-section-title { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; }
.pn-circle-detail-section-title strong { color: #2d2f36; font-size: 11px; }

.pn-circle-detail-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pn-circle-detail-stat-row > span {
    min-height: 60px;
    padding: 10px;
    border: 1px solid #eee9ed;
    border-radius: 15px;
    background: white;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 7px;
}

.pn-circle-detail-stat-row .pn-icon-svg { grid-row: 1 / 3; align-self: center; width: 19px; height: 19px; color: #ef4b74; }
.pn-circle-detail-stat-row b { color: #303139; font-size: 9px; }
.pn-circle-detail-stat-row small { color: #999aa2; font-size: 7px; }

/* Circle chat becomes flatter and closer to the supplied group-chat reference. */
.pn-circle-chat-shell { background: #fbfafb; }
.pn-circle-chat-header { background: rgba(255,255,255,.98); }
.pn-circle-chat-messages { background: linear-gradient(180deg, #fff, #fbfafb); }

.pn-circle-message p {
    border-color: #eee9ed;
    border-radius: 17px 17px 17px 7px;
    box-shadow: 0 3px 9px rgba(38, 30, 43, .035);
}

.pn-circle-message.is-mine p {
    background: linear-gradient(145deg, #f43770, #f24a78 58%, #ff6e72);
    box-shadow: 0 5px 13px rgba(190, 42, 84, .13);
}

/* v2.15.32 — chronological day separators + stable Circle chat message geometry. */
.pn-chat-day-separator {
    width: 100%;
    margin: 18px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #8b8d98;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .035em;
    text-align: center;
    text-transform: none;
    pointer-events: none;
}

.pn-chat-day-separator::before,
.pn-chat-day-separator::after {
    content: '';
    width: min(105px, 18vw);
    height: 1px;
    flex: 0 1 105px;
    background: linear-gradient(90deg, transparent, rgba(132,133,145,.22));
}

.pn-chat-day-separator::after {
    background: linear-gradient(90deg, rgba(132,133,145,.22), transparent);
}

.pn-chat-day-separator span {
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid rgba(226,224,230,.92);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 3px 12px rgba(39,31,47,.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    white-space: nowrap;
}

.pn-circle-chat-messages > .pn-chat-day-separator:first-child,
.pn-chat-messages > .pn-chat-day-separator:first-child {
    margin-top: 2px;
}

.pn-circle-message {
    max-width: 78%;
    margin: 9px 0;
    align-items: end;
}

.pn-circle-message.is-continuation {
    margin-top: 3px;
}

.pn-circle-message-content {
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pn-circle-message-content > strong {
    align-self: flex-start;
}

.pn-circle-message-bubble {
    width: fit-content;
    max-width: 100%;
    padding: 10px 12px 7px;
    border: 1px solid #eee9ed;
    border-radius: 17px 17px 17px 7px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(38,30,43,.035);
    color: #242630;
}

.pn-circle-message-text {
    display: block;
    min-width: 0;
    color: inherit;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pn-circle-message-time {
    margin-top: 4px;
    display: block;
    color: #a0a2ab;
    font-size: 7px;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.pn-circle-message.is-mine {
    max-width: 78%;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.pn-circle-message.is-mine .pn-circle-message-content {
    align-items: flex-end;
}

.pn-circle-message.is-mine .pn-circle-message-bubble {
    border-color: transparent;
    border-radius: 17px 17px 7px 17px;
    background: linear-gradient(145deg, #f43770, #f24a78 58%, #ff6e72);
    box-shadow: 0 5px 13px rgba(190,42,84,.13);
    color: #fff;
}

.pn-circle-message.is-mine .pn-circle-message-time {
    color: rgba(255,255,255,.72);
}

.pn-circle-message .pn-message-reactions {
    width: fit-content;
    max-width: 100%;
    margin-top: 5px;
}

.pn-circle-message.is-mine .pn-message-reactions {
    align-self: flex-end;
    justify-content: flex-end;
}

/* Retire the old block-level bubble rules now that the timestamp lives inside the bubble. */
.pn-circle-message p,
.pn-circle-message small {
    margin: 0;
}

@media (max-width: 560px) {
    .pn-chat-day-separator {
        margin: 15px 0 10px;
        gap: 8px;
        font-size: 7.5px;
    }

    .pn-chat-day-separator::before,
    .pn-chat-day-separator::after {
        width: min(62px, 15vw);
        flex-basis: 62px;
    }

    .pn-chat-day-separator span {
        padding: 4px 9px;
    }

    .pn-circle-message,
    .pn-circle-message.is-mine {
        max-width: 88%;
    }
}

/* Critical stacking fix: the 3-dot options and confirmation must sit above group chat. */
#pn-circle-members-modal { z-index: 100090 !important; }
#pn-circle-actions-modal { z-index: 100095 !important; }
#pn-circle-confirm-modal { z-index: 100105 !important; }
#pn-meetup-modal { z-index: 100095 !important; }

/* Long-press / hold emoji reactions. */
.pn-reactable-message { touch-action: pan-y; -webkit-touch-callout: none; }

.pn-reaction-tray {
    position: fixed;
    z-index: 100220;
    min-height: 47px;
    padding: 6px;
    border: 1px solid rgba(225,222,228,.92);
    border-radius: 999px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 38px rgba(34, 28, 42, .2);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    gap: 2px;
    transform: scale(.96) translateY(4px);
    transform-origin: center bottom;
    opacity: 0;
    transition: transform .13s ease, opacity .13s ease;
}

.pn-reaction-tray[hidden] { display: none !important; }
.pn-reaction-tray.is-visible { opacity: 1; transform: scale(1) translateY(0); }

.pn-reaction-tray button {
    width: 37px;
    height: 35px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

.pn-reaction-tray button:hover,
.pn-reaction-tray button:focus-visible { transform: scale(1.16); background: #f6f3f5; outline: none; }

.pn-message-reactions {
    min-height: 0;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pn-message-reactions:empty { display: none; }

.pn-reaction-chip {
    min-width: 31px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid #e8e4e9;
    border-radius: 999px;
    background: white;
    box-shadow: 0 2px 7px rgba(40,30,47,.05);
    color: #5f6067;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
}

.pn-reaction-chip.is-mine { border-color: #f4a8bc; background: #fff1f5; }
.pn-reaction-chip span { font-size: 11px; line-height: 1; }
.pn-reaction-chip b { font-size: 7px; font-weight: 850; }

.pn-circle-message.is-mine .pn-message-reactions { justify-content: flex-end; }

/* ==========================================================================
   Nudjee 2.15.74 — chat typing presence
   Real three-dot typing bubble for both human typing heartbeats and the
   consented blinded Research AI reply pipeline.
   ========================================================================== */
.pn-msg-wrap.is-typing {
    animation: pnTypingBubbleIn .22s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}

.pn-msg-typing {
    min-width: 58px;
    min-height: 38px;
    padding: 11px 14px;
    border: 1px solid rgba(224,225,232,.95);
    border-bottom-left-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f8fb 100%);
    box-shadow: 0 7px 18px rgba(39,31,50,.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pn-typing-dots {
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.pn-typing-dots i {
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #a8adbb;
    opacity: .38;
    transform: translateY(0) scale(.92);
    animation: pnTypingDot 1.12s ease-in-out infinite;
}

.pn-typing-dots i:nth-child(2) { animation-delay: .15s; }
.pn-typing-dots i:nth-child(3) { animation-delay: .30s; }

@keyframes pnTypingDot {
    0%, 68%, 100% { opacity: .34; transform: translateY(0) scale(.92); }
    30% { opacity: 1; transform: translateY(-3px) scale(1.06); }
}

@keyframes pnTypingBubbleIn {
    from { opacity: 0; transform: translateY(5px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .pn-msg-wrap.is-typing { animation: none; }
    .pn-typing-dots i { animation: none; opacity: .72; }
}

/* Direct-message wrapping so reactions sit outside the bubble. */
.pn-msg-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.pn-msg-wrap.is-sent { align-items: flex-end; }
.pn-msg-wrap.is-received { align-items: flex-start; }
.pn-msg-wrap .pn-msg { align-self: auto; }
.pn-msg-wrap.is-sent .pn-message-reactions { justify-content: flex-end; }

.pn-msg-sent {
    background: linear-gradient(145deg, #f33770, #f64b7a 58%, #ff6d70);
}

/* Meetup / booking card in one-to-one chat. */
.pn-chat-input-area-with-plan { align-items: center; }

.pn-chat-plan-button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    border: 1px solid #eee8ec;
    border-radius: 14px;
    background: #fff4f6;
    color: #ef4772;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.pn-chat-plan-button .pn-icon-svg { width: 18px; height: 18px; }

.pn-msg.is-meetup {
    width: min(88%, 330px);
    max-width: 88%;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: #2e3037;
    box-shadow: none;
}

.pn-msg.is-meetup .pn-msg-time {
    margin: 4px 5px 0;
    color: #91939b;
}

.pn-meetup-message-card {
    width: 100%;
    min-height: 74px;
    padding: 10px;
    border: 1px solid #ebe7eb;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(42,31,48,.055);
    display: grid;
    grid-template-columns: 39px minmax(0,1fr);
    gap: 9px;
}

.pn-meetup-card-pin {
    width: 39px;
    height: 39px;
    border-radius: 13px;
    background: #fff0f4;
    color: #ef4772;
    display: grid;
    place-items: center;
}

.pn-meetup-card-pin .pn-icon-svg { width: 19px; height: 19px; }
.pn-meetup-card-copy { min-width: 0; display: grid; gap: 3px; }
.pn-meetup-card-copy strong { overflow: hidden; color: #303139; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.pn-meetup-card-copy small { overflow: hidden; color: #777a84; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.pn-meetup-card-copy b { color: #ef4772; font-size: 8px; }
.pn-meetup-card-copy em { color: #696b74; font-size: 8px; font-style: normal; line-height: 1.35; }
.pn-meetup-card-links { margin-top: 3px; display: flex; gap: 9px; }
.pn-meetup-card-links a { color: #ef4772; font-size: 7px; font-weight: 850; text-decoration: none; }

.pn-meetup-sheet {
    width: min(100%, 520px);
    max-height: min(90dvh, 760px);
    overflow-y: auto;
}

.pn-meetup-symbol {
    width: 50px;
    height: 50px;
    margin-bottom: 11px;
    border-radius: 17px;
    background: linear-gradient(145deg, #f64a77, #ff9477);
    color: white;
    display: grid;
    place-items: center;
}

.pn-meetup-symbol .pn-icon-svg { width: 23px; height: 23px; }
.pn-meetup-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pn-meetup-note { padding: 10px 11px; border-radius: 13px; background: #f7f5f7; color: #787982; display: flex; gap: 7px; align-items: flex-start; font-size: 8px; line-height: 1.45; }
.pn-meetup-note .pn-icon-svg { width: 15px; height: 15px; flex: 0 0 15px; color: #ef4772; }

@media (max-width: 620px) {
    #pn-view-circles.pn-circles-reference-view {
        margin: 0;
        min-height: calc(var(--pn-visual-viewport-height, 100dvh) - 78px);
    }

    .pn-circles-reference-hero { padding: max(17px, env(safe-area-inset-top)) 14px 15px; }
    .pn-circles-reference-title h2 { font-size: 28px; }
    .pn-circles-reference-content { padding: 15px 12px 0; }
    .pn-circles-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .pn-circle-photo-card { min-height: 162px; border-radius: 15px; }
    .pn-circle-photo-cover { height: 91px; }

    .pn-circle-detail-overlay {
        padding: 0;
        align-items: flex-end;
        top: var(--pn-visual-viewport-offset);
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
    }

    .pn-circle-detail-shell {
        width: 100%;
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
        border-radius: 0;
    }

    .pn-circle-detail-cover { height: 42vh; min-height: 220px; max-height: 330px; }
    .pn-circle-detail-body { min-height: 58vh; }

    .pn-chats-community-view { padding: 14px 12px 24px; }
    .pn-mutual-match { width: 62px; flex-basis: 62px; }
    .pn-mutual-match-avatar { width: 53px; height: 53px; }

    .pn-reaction-tray { max-width: calc(100vw - 16px); }
    .pn-reaction-tray button { width: 35px; height: 34px; font-size: 19px; }

    #pn-meetup-modal {
        top: var(--pn-visual-viewport-offset);
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
        align-items: flex-end;
        padding: 0;
    }
    .pn-meetup-sheet { width: 100%; max-height: min(91dvh, var(--pn-visual-viewport-height)); border-radius: 24px 24px 0 0; }
}

@media (max-width: 370px) {
    .pn-circles-photo-grid { gap: 7px; }
    .pn-circle-photo-card { min-height: 154px; }
    .pn-circle-photo-cover { height: 84px; }
    .pn-circle-photo-copy { padding: 8px; }
    .pn-meetup-date-grid { grid-template-columns: 1fr; }
}

/* === v2.14.1 Nearby header, quick vibe sheet, bottom tab label toggle === */
.pn-nearby-reference-header {
    min-height: 84px;
    padding: 16px 20px;
    align-items: center;
    gap: 18px;
}

.pn-nearby-brand {
    gap: 14px;
}

.pn-nearby-brand strong {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.04em;
    color: #f34f76;
}

.pn-nearby-brand small {
    margin-top: 5px;
    font-size: .95rem;
    letter-spacing: 0;
    text-transform: none;
    color: #7d7388;
}

.pn-header-actions {
    margin-left: auto;
    gap: 10px;
    flex-wrap: nowrap;
}

.pn-header-actions .pn-icon-button {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(244, 89, 126, .14);
    color: #f14c75;
    box-shadow: 0 10px 24px rgba(244, 89, 126, .09);
}

.pn-header-actions .pn-icon-button:hover,
.pn-header-actions .pn-icon-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(244, 89, 126, .28);
}

.pn-header-actions #pn-visibility-toggle.is-active {
    background: linear-gradient(135deg, #ff5c84, #ff7c6d);
    color: #fff;
    border-color: transparent;
}

.pn-header-actions .pn-status-pill {
    min-height: 42px;
    border-radius: 14px;
    padding: 0 14px;
    box-shadow: 0 10px 24px rgba(24, 27, 44, .06);
}

.pn-vibe-sheet {
    width: min(560px, calc(100% - 28px));
}

.pn-vibe-options {
    display: grid;
    gap: 14px;
    margin: 20px 0 8px;
}

.pn-vibe-option {
    width: 100%;
    border: 1.5px solid rgba(234, 217, 225, .9);
    background: #fff;
    border-radius: 24px;
    padding: 18px 18px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 16px;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pn-vibe-option:hover,
.pn-vibe-option:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(32, 18, 35, .08);
}

.pn-vibe-option-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pn-vibe-option-icon .pn-icon-svg,
.pn-vibe-option-check .pn-icon-svg {
    width: 22px;
    height: 22px;
}

.pn-vibe-option-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pn-vibe-option-copy strong {
    font-size: 1.45rem;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #2f2435;
}

.pn-vibe-option-copy small {
    font-size: .98rem;
    line-height: 1.45;
    color: #756b80;
}

.pn-vibe-option-check {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 221, 228, .95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: #fff;
}

.pn-vibe-option.is-selected .pn-vibe-option-check {
    color: #f24f76;
    border-color: rgba(242, 79, 118, .28);
    background: rgba(242, 79, 118, .08);
}

.pn-vibe-option.is-romance .pn-vibe-option-icon,
.pn-vibe-option.is-romance.is-selected {
    border-color: rgba(244, 82, 122, .5);
    background: rgba(255, 238, 243, .88);
}
.pn-vibe-option.is-romance .pn-vibe-option-icon { color: #f24f76; background: rgba(244, 82, 122, .11); }

.pn-vibe-option.is-platonic .pn-vibe-option-icon,
.pn-vibe-option.is-platonic.is-selected {
    border-color: rgba(125, 94, 236, .42);
    background: rgba(243, 239, 255, .9);
}
.pn-vibe-option.is-platonic .pn-vibe-option-icon { color: #765eed; background: rgba(118, 94, 237, .11); }

.pn-vibe-option.is-business .pn-vibe-option-icon,
.pn-vibe-option.is-business.is-selected {
    border-color: rgba(81, 142, 247, .42);
    background: rgba(239, 246, 255, .9);
}
.pn-vibe-option.is-business .pn-vibe-option-icon { color: #4c8df4; background: rgba(76, 141, 244, .12); }

.pn-vibe-option.is-disabled::after {
    content: 'Currently off — selecting this will enable it';
    grid-column: 2 / 4;
    font-size: .82rem;
    color: #867c90;
}

.pn-vibe-option.is-selected {
    box-shadow: 0 16px 34px rgba(38, 20, 35, .07);
}

.pn-nav-text-hidden .pn-nav-item {
    min-height: 54px;
    justify-content: center;
}

.pn-nav-text-hidden .pn-nav-item > span {
    display: none;
}

.pn-nav-text-hidden .pn-nav-item .pn-icon-svg {
    margin: 0;
}

.pn-bottom-nav[data-show-labels="0"] {
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 860px) {
    .pn-nearby-reference-header {
        min-height: 78px;
        padding: 14px 14px;
        gap: 12px;
    }

    .pn-nearby-brand strong {
        font-size: 1.8rem;
    }

    .pn-nearby-brand small {
        font-size: .94rem;
    }

    .pn-header-actions {
        gap: 8px;
    }

    .pn-header-actions .pn-status-pill {
        min-width: 0;
        padding: 0 10px;
    }

    .pn-header-actions .pn-status-pill span:last-child {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pn-header-actions .pn-icon-button {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .pn-vibe-option {
        grid-template-columns: 48px minmax(0, 1fr) 34px;
        padding: 16px;
        border-radius: 22px;
        gap: 12px;
    }

    .pn-vibe-option-icon {
        width: 48px;
        height: 48px;
    }

    .pn-vibe-option-copy strong {
        font-size: 1.25rem;
    }

    .pn-vibe-option-copy small {
        font-size: .9rem;
    }
}

@media (max-width: 640px) {
    .pn-header-actions .pn-status-pill {
        display: none;
    }

    .pn-nearby-brand {
        gap: 10px;
    }

    .pn-nearby-brand .pn-brand-mark {
        width: 36px;
        height: 36px;
    }
}

/* === v2.14.2 animated nearby empty state + exact reference bottom nav + inbox splash === */
.pn-empty-orbit {
    overflow: visible;
}

.pn-empty-orbit::before,
.pn-empty-orbit::after {
    animation: pnOrbitSpin 14s linear infinite;
}

.pn-empty-orbit::after {
    animation-duration: 22s;
    animation-direction: reverse;
}

.pn-empty-orbit > span {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: -4px 0 0 -4px;
}

.pn-empty-orbit > span:nth-child(1) {
    animation: pnAtomOrbitOne 4.4s linear infinite;
    opacity: .95;
}

.pn-empty-orbit > span:nth-child(2) {
    animation: pnAtomOrbitTwo 5.7s linear infinite;
    opacity: .62;
}

.pn-empty-orbit > span:nth-child(3) {
    animation: pnAtomOrbitThree 6.8s linear infinite;
    opacity: .45;
}

.pn-empty-orbit .pn-icon-svg {
    width: 34px;
    height: 34px;
    animation: pnCrosshairPulse 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(255, 61, 110, .16));
}

.pn-empty-orbit::marker {
    display: none;
}

.pn-empty-orbit::selection {
    background: transparent;
}

@keyframes pnOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pnAtomOrbitOne {
    from { transform: rotate(0deg) translateX(42px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(42px) rotate(-360deg); }
}

@keyframes pnAtomOrbitTwo {
    from { transform: rotate(120deg) translateX(54px) rotate(-120deg); }
    to { transform: rotate(480deg) translateX(54px) rotate(-480deg); }
}

@keyframes pnAtomOrbitThree {
    from { transform: rotate(240deg) translateX(64px) rotate(-240deg); }
    to { transform: rotate(600deg) translateX(64px) rotate(-600deg); }
}

@keyframes pnCrosshairPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: .76; }
}

.pn-empty-splash {
    padding: 34px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 84, 124, .08);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,245,249,.96));
    border-radius: 28px;
    box-shadow: 0 20px 48px rgba(34, 22, 42, .07);
}

.pn-empty-splash-icon {
    width: 78px;
    height: 78px;
    border-radius: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #ff5f86, #ff7e72);
    box-shadow: 0 18px 36px rgba(255, 92, 131, .28);
}

.pn-empty-splash-icon .pn-icon-svg {
    width: 36px;
    height: 36px;
}

.pn-empty-splash strong {
    font-size: 1.18rem;
    color: #251d2c;
}

.pn-empty-splash p {
    margin: 0;
    max-width: 360px;
    color: #736979;
    line-height: 1.55;
}

.pn-empty-splash-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.pn-bottom-nav-reference {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 2px;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 0;
    box-shadow: 0 -10px 30px rgba(31, 24, 43, .08);
}

.pn-bottom-nav-reference .pn-nav-item {
    position: relative;
    min-height: 56px;
    padding: 6px 4px 0;
    border-radius: 20px;
    background: transparent;
    color: #8b8594;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: .74rem;
    font-weight: 650;
}

.pn-bottom-nav-reference .pn-nav-item .pn-icon-svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.9;
}

.pn-bottom-nav-reference .pn-nav-item:hover,
.pn-bottom-nav-reference .pn-nav-item:focus-visible,
.pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) {
    color: #f05479;
    background: transparent;
}

.pn-bottom-nav-reference .pn-nav-item i {
    top: 6px;
    right: calc(50% - 18px);
    box-shadow: 0 0 0 3px rgba(255,255,255,.96);
}

.pn-bottom-nav-reference .pn-nav-item-primary {
    width: 66px;
    height: 66px;
    margin: -28px auto 0;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff5d84, #ff7d71) !important;
    color: #fff !important;
    box-shadow: 0 18px 34px rgba(255, 88, 126, .34);
}

.pn-bottom-nav-reference .pn-nav-item-primary .pn-icon-svg {
    width: 28px;
    height: 28px;
}

.pn-bottom-nav-reference .pn-nav-item-primary > span {
    display: none;
}

.pn-bottom-nav-reference .pn-nav-item-primary i {
    top: 10px;
    right: 14px;
    background: #ff4f76;
    box-shadow: 0 0 0 3px #fff;
}

.pn-bottom-nav-reference .pn-nav-item-primary:hover,
.pn-bottom-nav-reference .pn-nav-item-primary:focus-visible,
.pn-bottom-nav-reference .pn-nav-item-primary.is-active {
    transform: translateY(-1px);
}

.pn-nav-text-hidden .pn-bottom-nav-reference .pn-nav-item:not(.pn-nav-item-primary) {
    min-height: 46px;
    padding-top: 2px;
}

.pn-nav-text-hidden .pn-bottom-nav-reference .pn-nav-item:not(.pn-nav-item-primary) > span {
    display: none;
}

@media (max-width: 860px) {
    .pn-bottom-nav-reference {
        padding-left: 10px;
        padding-right: 10px;
    }

    .pn-bottom-nav-reference .pn-nav-item {
        font-size: .68rem;
    }

    .pn-empty-splash {
        padding: 28px 16px;
    }
}

/* === v2.14.3 centre Discover star + connection-aware centre button === */
.pn-bottom-nav-reference .pn-nav-item-primary {
    position: relative;
    display: grid !important;
    place-items: center;
    align-content: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1;
    overflow: visible;
    background: linear-gradient(145deg, #ff5d84, #ff7d71) !important;
    transition: background .28s ease, box-shadow .28s ease, transform .18s ease;
}

.pn-bottom-nav-reference .pn-nav-item-primary .pn-icon-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    transform-origin: center;
    display: block;
    pointer-events: none;
}

#pn-app[data-connection-mode="romance"] .pn-bottom-nav-reference .pn-nav-item-primary,
#pn-app[data-discovery-view="romance"] .pn-bottom-nav-reference .pn-nav-item-primary {
    background: linear-gradient(145deg, #ff4f7b, #ff7b70) !important;
    box-shadow: 0 18px 34px rgba(255, 79, 123, .34);
}

#pn-app[data-connection-mode="platonic"] .pn-bottom-nav-reference .pn-nav-item-primary,
#pn-app[data-discovery-view="platonic"] .pn-bottom-nav-reference .pn-nav-item-primary {
    background: linear-gradient(145deg, #765eed, #9a7cff) !important;
    box-shadow: 0 18px 34px rgba(118, 94, 237, .31);
}

#pn-app[data-connection-mode="business"] .pn-bottom-nav-reference .pn-nav-item-primary,
#pn-app[data-discovery-view="business"] .pn-bottom-nav-reference .pn-nav-item-primary {
    background: linear-gradient(145deg, #3989f5, #5aa6ff) !important;
    box-shadow: 0 18px 34px rgba(57, 137, 245, .30);
}

#pn-app[data-connection-mode="all"] .pn-bottom-nav-reference .pn-nav-item-primary,
#pn-app[data-discovery-view="all"] .pn-bottom-nav-reference .pn-nav-item-primary {
    background: linear-gradient(145deg, #666b7b, #8b90a0) !important;
    box-shadow: 0 18px 34px rgba(91, 96, 114, .27);
}

/* Keep the unread badge independent of the centred star geometry. */
.pn-bottom-nav-reference .pn-nav-item-primary > i {
    position: absolute;
    top: 8px;
    right: 10px;
    margin: 0;
    transform: none;
}

/* === v2.14.4 nearby mode badge moved to bottom centre over profile image === */
.pn-nearby-person-photo {
    margin-bottom: 30px;
}

.pn-nearby-person-photo .pn-mode-photo-chip {
    left: 50%;
    top: auto;
    bottom: -22px;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: #ff5f84;
    border: 3px solid #fff;
    box-shadow: 0 14px 26px rgba(24, 18, 33, .16);
    font-size: 0;
    gap: 0;
    color: #fff;
}

.pn-nearby-person-card.is-romance .pn-mode-photo-chip { background: linear-gradient(145deg, #ff5c84, #ff7b71); }
.pn-nearby-person-card.is-platonic .pn-mode-photo-chip { background: linear-gradient(145deg, #765eed, #9a7cff); }
.pn-nearby-person-card.is-business .pn-mode-photo-chip { background: linear-gradient(145deg, #3989f5, #5aa6ff); }

.pn-nearby-person-photo .pn-mode-photo-chip .pn-icon-svg {
    width: 20px;
    height: 20px;
}

/* Mobile discovery cards */
.pn-mobile-nearby-photo {
    overflow: visible;
}

.pn-mobile-mode-badge {
    top: auto;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    font-size: 0;
    border: 3px solid #fff;
    box-shadow: 0 10px 22px rgba(17, 18, 25, .22);
}

.pn-mobile-mode-badge .pn-icon-svg {
    width: 18px;
    height: 18px;
}

.pn-mobile-person-meta {
    bottom: 24px;
}

@media (max-width: 860px) {
    .pn-nearby-person-photo {
        margin-bottom: 28px;
    }

    .pn-nearby-person-photo .pn-mode-photo-chip {
        width: 42px;
        height: 42px;
        bottom: -20px;
    }

    .pn-nearby-person-photo .pn-mode-photo-chip .pn-icon-svg {
        width: 18px;
        height: 18px;
    }
}

/* === v2.14.5 persistent app tabs + connection-aware active tabs + themed Circles === */
#pn-app {
    --pn-tab-accent: #ff4f7b;
    --pn-tab-accent-strong: #e83d6a;
}

#pn-app[data-connection-mode="romance"],
#pn-app[data-discovery-view="romance"] {
    --pn-tab-accent: #ff4f7b;
    --pn-tab-accent-strong: #e83d6a;
}

#pn-app[data-connection-mode="platonic"],
#pn-app[data-discovery-view="platonic"] {
    --pn-tab-accent: #765eed;
    --pn-tab-accent-strong: #6248df;
}

#pn-app[data-connection-mode="business"],
#pn-app[data-discovery-view="business"] {
    --pn-tab-accent: #3989f5;
    --pn-tab-accent-strong: #2474df;
}

#pn-app[data-connection-mode="all"],
#pn-app[data-discovery-view="all"] {
    --pn-tab-accent: #676d7c;
    --pn-tab-accent-strong: #535968;
}

/* Main hub behaves like an in-app page. The persistent tab bar remains interactive. */
#pn-app > #pn-hub-modal {
    position: absolute;
    inset: 0 0 76px;
    z-index: 100400;
    padding: 0;
    background: #fbfbfd;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    align-items: stretch;
    justify-content: stretch;
}

#pn-app > #pn-hub-modal .pn-hub-shell {
    width: 100% !important;
    height: 100%;
    min-height: 0;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
    animation: pnHubPageIn .2s ease both;
}

#pn-app > #pn-hub-modal > .pn-hub-shell > .pn-modal-header {
    flex: 0 0 auto;
}

/* Circles already owns its own branded page header, so remove the duplicate generic modal header. */
#pn-app > #pn-hub-modal[data-hub-tab="circles"] > .pn-hub-shell > .pn-modal-header {
    display: none;
}

/* Page-level hub views should never run underneath the persistent bottom tabs. */
#pn-app > #pn-hub-modal .pn-hub-view {
    padding-bottom: 14px;
}

@keyframes pnHubPageIn {
    from { opacity: .35; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Keep the app navigation above the hub page. */
#pn-app .pn-bottom-nav-reference {
    z-index: 100500;
}

/* Active tabs use the current connection colour and reverse the icon/text to white. */
#pn-app .pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) {
    background: var(--pn-tab-accent) !important;
    color: #fff !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--pn-tab-accent) 28%, transparent);
}

#pn-app .pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) .pn-icon-svg,
#pn-app .pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) > span {
    color: #fff !important;
    stroke: currentColor;
}

#pn-app .pn-bottom-nav-reference .pn-nav-item:not(.is-active):not(.pn-nav-item-primary) {
    background: transparent !important;
    color: #8b8594 !important;
}

/* The centre branded action remains connection-aware. */
#pn-app .pn-bottom-nav-reference .pn-nav-item-primary {
    background: linear-gradient(145deg, var(--pn-tab-accent), var(--pn-tab-accent-strong)) !important;
    color: #fff !important;
    box-shadow: 0 18px 34px color-mix(in srgb, var(--pn-tab-accent) 34%, transparent);
}

/* Replace the optically off-centre two-spark glyph with one mathematically centred sparkle. */
#pn-app .pn-bottom-nav-reference .pn-nav-item-primary .pn-icon-svg {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 50% 50%;
    display: block;
    overflow: visible;
}

/* Circles hero inherits the active connection type. */
#pn-app[data-connection-mode="romance"] .pn-circles-reference-view,
#pn-app[data-discovery-view="romance"] .pn-circles-reference-view {
    background: linear-gradient(180deg, #fff6f8 0, #fff 235px, #fff 100%);
}

#pn-app[data-connection-mode="romance"] .pn-circles-reference-hero,
#pn-app[data-discovery-view="romance"] .pn-circles-reference-hero {
    background:
        radial-gradient(circle at 14% -10%, rgba(255,255,255,.25), transparent 36%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg, #ff4d82 0%, #ff6b78 51%, #ff9b7f 100%);
}

#pn-app[data-connection-mode="platonic"] .pn-circles-reference-view,
#pn-app[data-discovery-view="platonic"] .pn-circles-reference-view {
    background: linear-gradient(180deg, #f7f4ff 0, #fff 235px, #fff 100%);
}

#pn-app[data-connection-mode="platonic"] .pn-circles-reference-hero,
#pn-app[data-discovery-view="platonic"] .pn-circles-reference-hero {
    background:
        radial-gradient(circle at 14% -10%, rgba(255,255,255,.24), transparent 36%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.17), transparent 28%),
        linear-gradient(135deg, #674fe4 0%, #8067ee 54%, #a58cff 100%);
}

#pn-app[data-connection-mode="business"] .pn-circles-reference-view,
#pn-app[data-discovery-view="business"] .pn-circles-reference-view {
    background: linear-gradient(180deg, #f2f8ff 0, #fff 235px, #fff 100%);
}

#pn-app[data-connection-mode="business"] .pn-circles-reference-hero,
#pn-app[data-discovery-view="business"] .pn-circles-reference-hero {
    background:
        radial-gradient(circle at 14% -10%, rgba(255,255,255,.24), transparent 36%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.17), transparent 28%),
        linear-gradient(135deg, #2479e8 0%, #438ff2 53%, #6baeff 100%);
}

#pn-app[data-connection-mode="all"] .pn-circles-reference-view,
#pn-app[data-discovery-view="all"] .pn-circles-reference-view {
    background: linear-gradient(180deg, #f5f6f8 0, #fff 235px, #fff 100%);
}

#pn-app[data-connection-mode="all"] .pn-circles-reference-hero,
#pn-app[data-discovery-view="all"] .pn-circles-reference-hero {
    background:
        radial-gradient(circle at 14% -10%, rgba(255,255,255,.22), transparent 36%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.16), transparent 28%),
        linear-gradient(135deg, #555c6d 0%, #6c7384 53%, #9097a7 100%);
}

#pn-app .pn-circles-create-icon {
    color: var(--pn-tab-accent);
}

@media (max-width: 860px) {
    #pn-app > #pn-hub-modal {
        inset: 0 0 72px;
    }

    #pn-app > #pn-hub-modal .pn-hub-shell {
        height: 100%;
        max-height: none !important;
        border-radius: 0;
    }

    #pn-app .pn-bottom-nav-reference {
        z-index: 100500;
    }
}

/* === v2.14.6 unified in-app notifications centre === */
.pn-header-notification-button {
    position: relative;
}

.pn-header-notification-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff4f76;
    color: #fff;
    border: 2px solid #fff;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

#pn-app > .pn-notification-center-overlay {
    position: absolute;
    inset: 0 0 76px;
    z-index: 100450;
    padding: 18px;
    align-items: center;
    justify-content: center;
    background: rgba(28, 24, 35, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pn-notification-center {
    width: min(100%, 590px);
    max-height: min(680px, calc(100% - 22px));
    min-height: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(36, 30, 45, .08);
    box-shadow: 0 28px 70px rgba(28, 23, 38, .2);
}

.pn-notification-center-header {
    flex: 0 0 auto;
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(37, 31, 47, .07);
    background: linear-gradient(135deg, color-mix(in srgb, var(--pn-tab-accent) 10%, #fff), #fff 68%);
}

.pn-notification-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pn-notification-title-wrap h2 {
    margin: 2px 0 0;
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -.035em;
    color: #2d2632;
}

.pn-notification-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--pn-tab-accent);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--pn-tab-accent) 24%, transparent);
}

.pn-notification-title-icon .pn-icon-svg {
    width: 21px;
    height: 21px;
}

.pn-notification-filters {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
    padding: 12px 16px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(37, 31, 47, .06);
    scrollbar-width: none;
}

.pn-notification-filters::-webkit-scrollbar { display: none; }

.pn-notification-filters button {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(37, 31, 47, .09);
    border-radius: 999px;
    background: #fff;
    color: #777080;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.pn-notification-filters button.is-active {
    border-color: var(--pn-tab-accent);
    background: var(--pn-tab-accent);
    color: #fff;
}

.pn-notification-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px 16px;
}

.pn-notification-item {
    width: 100%;
    min-height: 82px;
    padding: 12px 12px;
    border: 0;
    border-bottom: 1px solid rgba(36, 30, 45, .06);
    border-radius: 18px;
    background: transparent;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 10px;
    gap: 12px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

.pn-notification-item:hover,
.pn-notification-item:focus-visible {
    background: rgba(39, 32, 49, .035);
}

.pn-notification-item.is-unread {
    background: color-mix(in srgb, var(--pn-tab-accent) 7%, #fff);
}

.pn-notification-avatar {
    width: 50px;
    height: 50px;
    border-radius: 17px;
    position: relative;
    background-position: center;
    background-size: cover;
    background-color: #f2eef3;
    box-shadow: inset 0 0 0 1px rgba(38, 31, 47, .06);
}

.pn-notification-type {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--pn-tab-accent);
    border: 2px solid #fff;
    box-shadow: 0 5px 12px rgba(34, 28, 42, .15);
}

.pn-notification-type.is-chat { background: #6d70e8; }
.pn-notification-type.is-circle { background: #6e5ee8; }
.pn-notification-type.is-nudge { background: #f44f78; }
.pn-notification-type .pn-icon-svg { width: 12px; height: 12px; }

.pn-notification-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pn-notification-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    color: #302837;
}

.pn-notification-body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #726978;
    font-size: .79rem;
    line-height: 1.4;
}

.pn-notification-time {
    margin-top: 2px;
    color: #a099a5;
    font-size: .7rem;
    font-weight: 700;
}

.pn-notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pn-tab-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-tab-accent) 12%, transparent);
}

.pn-notification-empty {
    min-height: 300px;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.pn-notification-empty > span {
    width: 64px;
    height: 64px;
    margin-bottom: 5px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pn-tab-accent);
    background: color-mix(in srgb, var(--pn-tab-accent) 10%, #fff);
}

.pn-notification-empty > span .pn-icon-svg { width: 28px; height: 28px; }
.pn-notification-empty strong { color: #312936; font-size: 1rem; }
.pn-notification-empty small { max-width: 310px; color: #817987; line-height: 1.5; }

@media (max-width: 860px) {
    #pn-app > .pn-notification-center-overlay {
        inset: 0 0 72px;
        padding: 10px;
        align-items: flex-end;
    }

    .pn-notification-center {
        width: 100%;
        max-height: calc(100% - 8px);
        border-radius: 26px 26px 18px 18px;
    }

    .pn-notification-center-header {
        padding: 17px 16px 14px;
    }

    .pn-notification-title-wrap h2 {
        font-size: 1.4rem;
    }
}


/* === v2.14.7 mobile nearby empty-state animated orbit === */
.pn-mobile-nearby-empty {
    overflow: hidden;
}

.pn-mobile-empty-orbit {
    position: relative;
    width: 124px;
    height: 124px;
    margin: 0 auto 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--pn-mobile-mode);
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 34%, color-mix(in srgb, var(--pn-mobile-mode) 8%, white) 35% 64%, rgba(255,255,255,.98) 65% 100%);
}

.pn-mobile-empty-orbit::before,
.pn-mobile-empty-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--pn-mobile-mode) 18%, white);
    animation: pnOrbitSpin 14s linear infinite;
}

.pn-mobile-empty-orbit::before {
    inset: 14px;
}

.pn-mobile-empty-orbit::after {
    inset: -2px;
    opacity: .8;
    animation-duration: 20s;
    animation-direction: reverse;
}

.pn-mobile-empty-orbit .pn-icon-svg {
    width: 34px;
    height: 34px;
    position: relative;
    z-index: 2;
    animation: pnCrosshairPulse 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--pn-mobile-mode) 20%, transparent));
}

.pn-mobile-empty-orbit > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pn-mobile-mode) 86%, white);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-mobile-mode) 12%, transparent);
    z-index: 1;
}

.pn-mobile-empty-orbit > span:nth-child(2) {
    animation: pnAtomOrbitOne 4.8s linear infinite;
}

.pn-mobile-empty-orbit > span:nth-child(3) {
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    opacity: .68;
    animation: pnAtomOrbitTwo 6.1s linear infinite;
}

.pn-mobile-empty-orbit > span:nth-child(4) {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    opacity: .46;
    animation: pnAtomOrbitThree 7.2s linear infinite;
}

/* === v2.14.8 map marker mode badge moved to bottom centre === */
.pn-marker-mode {
    left: 50%;
    top: auto;
    right: auto;
    bottom: -8px;
    transform: translateX(-50%);
}

.pn-me-marker .pn-marker-mode,
.pn-face-marker .pn-marker-mode {
    left: 50%;
    top: auto;
    bottom: -8px;
    transform: translateX(-50%);
}


/* === v2.14.9 mobile empty-state navigation actions === */
.pn-mobile-empty-actions {
    width: min(100%, 330px);
    margin-top: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.pn-mobile-empty-actions .pn-open-referrals {
    grid-column: 1 / -1;
}

.pn-mobile-empty-actions .pn-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    white-space: normal;
    text-align: center;
}

@media (max-width: 430px) {
    .pn-mobile-empty-actions {
        grid-template-columns: 1fr;
    }
    .pn-mobile-empty-actions .pn-open-referrals {
        grid-column: auto;
    }
}

/* ========================================================================== 
   2.15.0 — desktop viewport-fit application shell
   The browser page itself never scrolls. Nudjee occupies the complete desktop
   viewport and every app page is constrained above the persistent bottom bar.
   ========================================================================== */
@media (min-width: 861px) {
    html:has(body.pn-app-viewport),
    body.pn-app-viewport {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.pn-app-viewport #wpadminbar {
        display: none !important;
    }

    body.pn-app-viewport #pn-app.pn-app-shell {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column;
        background: var(--pn-surface);
    }

    body.pn-app-viewport #pn-app > .pn-app-header {
        flex: 0 0 auto;
        width: 100%;
    }

    body.pn-app-viewport #pn-app > .pn-verification-banner {
        flex: 0 0 auto;
        margin-inline: 14px;
    }

    body.pn-app-viewport #pn-app > .pn-live-mode-bar {
        flex: 0 0 auto;
        width: min(calc(100% - 34px), 1120px);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    body.pn-app-viewport #pn-app > .pn-discover-view {
        flex: 1 1 0;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
        grid-template-columns: minmax(0, 1.65fr) minmax(320px, .72fr);
    }

    body.pn-app-viewport #pn-app .pn-map-stage,
    body.pn-app-viewport #pn-app #pn-map-container {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    body.pn-app-viewport #pn-app .pn-nearby-panel {
        height: 100%;
        min-height: 0;
        padding: clamp(16px, 2.2vh, 28px) clamp(16px, 1.7vw, 25px);
        overflow: hidden;
    }

    body.pn-app-viewport #pn-app .pn-nearby-heading {
        flex: 0 0 auto;
        margin-bottom: clamp(10px, 1.5vh, 18px);
    }

    body.pn-app-viewport #pn-app .pn-nearby-card {
        flex: 1 1 0;
        min-height: 0 !important;
        height: auto;
    }

    body.pn-app-viewport #pn-app .pn-nearby-person-photo {
        height: clamp(150px, 30vh, 245px);
    }

    body.pn-app-viewport #pn-app .pn-intent-note {
        flex: 0 0 auto;
        margin-top: 10px;
        padding-top: 10px;
    }

    /* Bottom navigation is part of the viewport flow, never underneath content. */
    body.pn-app-viewport #pn-app > .pn-bottom-nav-reference {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        flex: 0 0 76px;
        width: 100%;
        height: 76px;
        min-height: 76px;
        z-index: 100500;
    }

    /* Hub pages consume precisely the area above the bottom tabs. */
    body.pn-app-viewport #pn-app > #pn-hub-modal {
        position: absolute !important;
        inset: 0 0 76px !important;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: hidden !important;
    }

    body.pn-app-viewport #pn-app > #pn-hub-modal .pn-hub-shell {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body.pn-app-viewport #pn-app > #pn-hub-modal .pn-hub-view {
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
    }

    /* Dynamic feeds remain contained in their page instead of making the browser scroll. */
    body.pn-app-viewport #pn-view-inbox,
    body.pn-app-viewport #pn-view-chats,
    body.pn-app-viewport #pn-view-circles,
    body.pn-app-viewport #pn-view-subscription {
        height: 100%;
        overflow-y: auto;
        scrollbar-width: none;
    }

    body.pn-app-viewport #pn-view-inbox::-webkit-scrollbar,
    body.pn-app-viewport #pn-view-chats::-webkit-scrollbar,
    body.pn-app-viewport #pn-view-circles::-webkit-scrollbar,
    body.pn-app-viewport #pn-view-subscription::-webkit-scrollbar {
        display: none;
    }

    /* Profile becomes a bounded desktop workspace: hero + section tabs + active
       settings area + save action all remain inside the available app height. */
    body.pn-app-viewport #pn-view-profile {
        height: 100%;
        min-height: 0;
        overflow: hidden !important;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-form {
        height: 100% !important;
        min-height: 0 !important;
        padding: 12px 16px 0;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        overflow: hidden;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-hero-card {
        margin-bottom: 0;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-tabs {
        position: relative !important;
        top: auto !important;
        margin: 8px 0 7px;
        min-height: 0;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-tab-panel {
        min-height: 0;
        max-height: 100%;
        padding: 2px 6px 18px 0;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-tab-panel::-webkit-scrollbar {
        display: none;
    }

    body.pn-app-viewport #pn-view-profile .pn-sticky-save {
        position: relative !important;
        bottom: auto !important;
        margin: 0 -16px;
        padding: 9px 16px 10px;
        flex: 0 0 auto;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-external-panel {
        max-height: 100%;
        overflow-y: auto;
        scrollbar-width: none;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-external-panel::-webkit-scrollbar {
        display: none;
    }

    /* Circles uses the full desktop canvas instead of retaining a narrow mobile rhythm. */
    body.pn-app-viewport #pn-view-circles.pn-circles-reference-view {
        padding-bottom: 0;
    }

    body.pn-app-viewport #pn-view-circles .pn-circles-reference-hero {
        padding: clamp(15px, 2vh, 23px) clamp(18px, 2vw, 30px) clamp(12px, 1.6vh, 17px);
    }

    body.pn-app-viewport #pn-view-circles .pn-circles-reference-content {
        padding: 14px clamp(18px, 2vw, 30px) 18px;
    }

    /* Never allow WordPress/theme wrappers to create a second desktop scrollbar. */
    body.pn-app-viewport > *:not(#wpadminbar) {
        max-height: 100dvh;
    }
}

/* Compact desktop geometry for laptops with shorter vertical viewports. */
@media (min-width: 861px) and (max-height: 820px) {
    body.pn-app-viewport #pn-app > .pn-app-header {
        min-height: 62px;
        height: 62px;
        padding-block: 8px;
    }

    body.pn-app-viewport #pn-app > .pn-live-mode-bar {
        min-height: 54px;
        margin-top: 6px;
        margin-bottom: 6px;
        padding-block: 5px;
    }

    body.pn-app-viewport #pn-app .pn-live-mode-switch button {
        min-height: 34px;
    }

    body.pn-app-viewport #pn-app .pn-nearby-heading h2 {
        font-size: 21px;
    }

    body.pn-app-viewport #pn-app .pn-nearby-person-photo {
        height: clamp(125px, 24vh, 190px);
    }

    body.pn-app-viewport #pn-app .pn-nearby-card {
        padding: 15px;
        border-radius: 22px;
    }

    body.pn-app-viewport #pn-app .pn-empty-orbit {
        width: 92px;
        height: 92px;
        margin-bottom: 10px;
    }

    body.pn-app-viewport #pn-app .pn-bottom-nav-reference {
        flex-basis: 70px;
        height: 70px;
        min-height: 70px;
    }

    body.pn-app-viewport #pn-app > #pn-hub-modal {
        inset: 0 0 70px !important;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-tab {
        min-height: 48px;
        padding-block: 5px;
    }

    body.pn-app-viewport #pn-view-profile .pn-profile-tabs {
        margin-block: 5px;
    }
}


/* === v2.15.1 notification limits, dismiss controls and swipe-to-dismiss === */
.pn-notification-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.pn-notification-clear-all {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--pn-tab-accent) 22%, #e7e2e9);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pn-tab-accent) 6%, #fff);
    color: var(--pn-tab-accent);
    font-size: .76rem;
    font-weight: 850;
    cursor: pointer;
}

.pn-notification-clear-all:disabled {
    opacity: .55;
    cursor: wait;
}

.pn-notification-row {
    position: relative;
    width: 100%;
    min-height: 82px;
    overflow: hidden;
    border-radius: 18px;
    border-bottom: 1px solid rgba(36, 30, 45, .06);
    transition: height .19s ease, opacity .19s ease, margin .19s ease, transform .19s ease;
    touch-action: pan-y;
}

.pn-notification-row.is-unread {
    background: color-mix(in srgb, var(--pn-tab-accent) 7%, #fff);
}

.pn-notification-slide {
    position: relative;
    z-index: 2;
    min-height: 82px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: stretch;
    background: #fff;
    transition: transform .2s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.pn-notification-row.is-unread .pn-notification-slide {
    background: color-mix(in srgb, var(--pn-tab-accent) 7%, #fff);
}

.pn-notification-row.is-swiping .pn-notification-slide {
    transition: none;
}

.pn-notification-row.is-dismissing .pn-notification-slide {
    pointer-events: none;
}

.pn-notification-row.is-removed {
    height: 0 !important;
    min-height: 0;
    opacity: 0;
    margin: 0;
    transform: scale(.98);
    border-bottom-width: 0;
}

.pn-notification-item {
    min-height: 82px;
    border-bottom: 0;
    border-radius: 18px 0 0 18px;
    grid-template-columns: 52px minmax(0, 1fr) 10px;
}

.pn-notification-row.is-unread .pn-notification-item {
    background: transparent;
}

.pn-notification-line-dismiss {
    width: 38px;
    min-height: 82px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a49ca9;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0 18px 18px 0;
}

.pn-notification-line-dismiss:hover,
.pn-notification-line-dismiss:focus-visible {
    color: #df355d;
    background: rgba(223, 53, 93, .07);
}

.pn-notification-dismiss-rail {
    position: absolute;
    z-index: 1;
    inset: 0 0 0 auto;
    width: 108px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background: linear-gradient(90deg, #ef4d6f, #da3156);
}

.pn-notification-swipe-dismiss {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
    opacity: .18;
    transform: translateX(12px);
    transition: opacity .16s ease, transform .16s ease;
}

.pn-notification-row.is-quarter-swiped .pn-notification-swipe-dismiss,
.pn-notification-row.is-swiped .pn-notification-swipe-dismiss {
    opacity: 1;
    transform: translateX(0);
}

.pn-notification-row.is-swiped .pn-notification-swipe-dismiss {
    pointer-events: auto;
}

@media (max-width: 620px) {
    .pn-notification-center-header {
        align-items: flex-start;
    }

    .pn-notification-header-actions {
        gap: 6px;
    }

    .pn-notification-clear-all {
        min-height: 34px;
        padding: 0 10px;
        font-size: .7rem;
    }

    .pn-notification-line-dismiss {
        width: 34px;
    }

    .pn-notification-slide {
        grid-template-columns: minmax(0, 1fr) 34px;
    }
}

/* v2.15.3 — multi-identity discovery, Circle moderation + hero controls. */
.pn-map-identity-card {
    position: relative;
    border-width: 1.5px;
}

.pn-map-identity-card.is-enabled {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(42, 39, 55, .08);
}

.pn-map-identity-card.is-romance.is-enabled {
    border-color: rgba(255, 79, 123, .44);
    background: linear-gradient(145deg, rgba(255, 79, 123, .075), rgba(255, 123, 112, .035));
}

.pn-map-identity-card.is-platonic.is-enabled {
    border-color: rgba(118, 94, 237, .42);
    background: linear-gradient(145deg, rgba(118, 94, 237, .075), rgba(154, 124, 255, .035));
}

.pn-map-identity-card.is-business.is-enabled {
    border-color: rgba(57, 137, 245, .42);
    background: linear-gradient(145deg, rgba(57, 137, 245, .075), rgba(90, 166, 255, .035));
}

/* The discovery-star badge intentionally mirrors the View All bottom-nav colour. */
.pn-marker-mode.is-all {
    background: linear-gradient(145deg, #666b7b, #8b90a0) !important;
    box-shadow: 0 5px 13px rgba(91, 96, 114, .31);
}

.pn-marker-mode.is-all .pn-icon-svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
}

.pn-circle-photo-cover.has-hero::before,
.pn-circle-detail-cover.has-hero::before {
    background-image: var(--pn-circle-hero) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.pn-circle-photo-cover.has-hero::after,
.pn-circle-detail-cover.has-hero::after {
    opacity: .38;
    background: linear-gradient(180deg, rgba(14, 18, 27, .04), rgba(14, 18, 27, .38));
}

.pn-circle-photo-cover.has-hero .pn-circle-cover-emoji {
    opacity: 0;
    pointer-events: none;
}

.pn-circle-hero-edit {
    position: absolute;
    z-index: 5;
    top: 13px;
    right: 13px;
    border-color: rgba(255,255,255,.34) !important;
    background: rgba(29,29,35,.44) !important;
    color: #fff !important;
    backdrop-filter: blur(9px);
}

.pn-circle-hero-edit .pn-icon-svg {
    width: 17px;
    height: 17px;
}

.pn-circle-team-card {
    width: 100%;
    min-height: 68px;
    margin-top: 9px;
    padding: 10px 11px;
    border: 1px solid #eee9ed;
    border-radius: 16px;
    background: #fff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(39,27,45,.035);
}

.pn-circle-team-card[hidden] { display: none !important; }

.pn-circle-team-avatars {
    min-width: 52px;
    display: flex;
    align-items: center;
}

.pn-circle-team-avatars img {
    width: 32px;
    height: 32px;
    margin-left: -9px;
    border: 2px solid #fff;
    border-radius: 11px;
    object-fit: cover;
    background: #f3f3f6;
}

.pn-circle-team-avatars img:first-child { margin-left: 0; }

.pn-circle-team-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-circle-team-copy strong {
    color: #2d2f36;
    font-size: 9px;
}

.pn-circle-team-copy small {
    overflow: hidden;
    color: #8b8d95;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 7px;
}

.pn-circle-team-action {
    color: #ef4b74;
    font-size: 8px;
    font-weight: 850;
}

.pn-circle-member-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 4px;
}

.pn-circle-member-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pn-circle-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .02em;
}

.pn-circle-role-badge.is-owner {
    color: #b73a5c;
    background: #fff0f4;
}

.pn-circle-role-badge.is-moderator {
    color: #6656d8;
    background: #f0edff;
}

.pn-circle-member-role-button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid #e8e5ec;
    border-radius: 10px;
    background: #f8f7fa;
    color: #555864;
    font-size: 7px;
    font-weight: 850;
    cursor: pointer;
}

.pn-circle-member-role-button:hover,
.pn-circle-member-role-button:focus-visible {
    border-color: #d9d2f6;
    background: #f2efff;
    color: #5f50cf;
}

.pn-circle-member-role-button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 620px) {
    .pn-current-map-identity-grid { grid-template-columns: 1fr; }
    .pn-map-identity-card { min-height: 88px; }
    .pn-circle-member { align-items: center; }
    .pn-circle-member-role-button { max-width: 96px; white-space: normal; line-height: 1.2; }
}

/* v2.15.3 signup Step 4 — Cross Mode choice. */
.pn-register-cross-step {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--pn-line);
}

.pn-signup-cross-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pn-signup-cross-choice.is-cross .pn-signup-intent-icon {
    color: #6554df;
    background: rgba(118, 94, 237, .10);
}

.pn-signup-cross-choice.is-standard .pn-signup-intent-icon {
    color: #646977;
    background: rgba(102, 107, 123, .10);
}

.pn-signup-cross-choice.is-cross.is-selected {
    border-color: rgba(118, 94, 237, .58);
    background: rgba(118, 94, 237, .035);
}

.pn-signup-cross-choice.is-standard.is-selected {
    border-color: rgba(102, 107, 123, .5);
    background: rgba(102, 107, 123, .04);
}

.pn-signup-cross-choice.is-cross.is-selected > i { background: #765eed; }
.pn-signup-cross-choice.is-standard.is-selected > i { background: #666b7b; }

@media (max-width: 620px) {
    .pn-signup-cross-grid { grid-template-columns: 1fr; }
}


/* 2.15.4 contextual chat actions + device-aware image selection */
.pn-conv-item {
    -webkit-touch-callout: none;
}

.pn-conv-item.is-holding {
    transform: scale(.992);
    border-color: color-mix(in srgb, var(--pn-mode-accent) 34%, var(--pn-line));
    box-shadow: 0 8px 24px rgba(28,24,40,.08);
}

.pn-image-source-sheet .pn-confirm-symbol .pn-icon-svg {
    width: 25px;
    height: 25px;
}

.pn-image-source-actions [hidden],
.pn-live-mode-switch [hidden] {
    display: none !important;
}


/* 2.15.6 — nested image chooser must sit above Circle/detail and hub layers. */
#pn-image-source-modal {
    z-index: 100700 !important;
    isolation: isolate;
}

#pn-image-source-modal .pn-image-source-sheet {
    position: relative;
    z-index: 1;
}


/* 2.15.7 — Profile/account headings always stack helper copy below the title. */
#pn-view-profile .pn-section-heading {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
}

#pn-view-profile .pn-section-heading > span,
#pn-view-profile .pn-section-heading > small {
    width: 100%;
    max-width: 100%;
}

#pn-view-profile .pn-section-heading small {
    display: block;
    margin: 0;
    text-align: left;
    line-height: 1.4;
}

#pn-view-profile .pn-field > span small {
    display: block;
    margin-top: 2px;
    line-height: 1.35;
}

#pn-view-profile .pn-setting-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#pn-view-profile .pn-setting-copy strong,
#pn-view-profile .pn-setting-copy small {
    width: 100%;
}


/* 2.15.9 — Circle membership type + invite-only approvals */
.pn-circle-type-picker { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.pn-circle-type-picker > legend { margin: 0 0 6px; padding: 0; color: var(--pn-ink); font-size: 11px; font-weight: 800; }
.pn-circle-type-option { position: relative; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--pn-line); border-radius: 17px; background: var(--pn-surface, #fff); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.pn-circle-type-option:hover { transform: translateY(-1px); }
.pn-circle-type-option:has(input:checked) { border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 52%, var(--pn-line)); background: var(--pn-mode-soft, var(--pn-primary-soft)); }
.pn-circle-type-option > input { position: absolute; opacity: 0; pointer-events: none; }
.pn-circle-type-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 10%, #fff); color: var(--pn-mode-accent, var(--pn-primary)); }
.pn-circle-type-icon .pn-icon-svg { width: 20px; height: 20px; }
.pn-circle-type-copy { min-width: 0; display: grid; gap: 3px; }
.pn-circle-type-copy strong { color: var(--pn-ink); font-size: 11px; line-height: 1.3; }
.pn-circle-type-copy small { color: var(--pn-muted); font-size: 8.5px; line-height: 1.45; }
.pn-circle-type-option > i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--pn-line); color: transparent; background: #fff; }
.pn-circle-type-option:has(input:checked) > i { color: #fff; border-color: var(--pn-mode-accent, var(--pn-primary)); background: var(--pn-mode-accent, var(--pn-primary)); }
.pn-circle-type-option > i .pn-icon-svg { width: 13px; height: 13px; }
.pn-circle-private-mark { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; background: rgba(14, 18, 28, .72); color: #fff; font-size: 7px; font-weight: 850; letter-spacing: .02em; backdrop-filter: blur(8px); }
.pn-circle-private-mark .pn-icon-svg { width: 10px; height: 10px; }
.pn-circle-invite-overlay { z-index: 100090; }
.pn-circle-invite-sheet, .pn-circle-invites-sheet { width: min(100%, 600px); max-height: min(88dvh, 760px); overflow-y: auto; }
.pn-circle-invite-list { display: grid; gap: 9px; margin-top: 14px; }
.pn-circle-invite-section-title { display: grid; gap: 2px; margin-top: 6px; }
.pn-circle-invite-section-title strong { color: var(--pn-ink); font-size: 11px; }
.pn-circle-invite-section-title small { color: var(--pn-muted); font-size: 8px; }
.pn-circle-invite-row { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--pn-line); border-radius: 15px; background: var(--pn-surface, #fff); }
.pn-circle-invite-row > img { width: 40px; height: 40px; border-radius: 13px; object-fit: cover; background: #eef0f4; }
.pn-circle-invite-row > span { min-width: 0; display: grid; gap: 2px; }
.pn-circle-invite-row > span strong { color: var(--pn-ink); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-circle-invite-row > span small { color: var(--pn-muted); font-size: 8px; line-height: 1.35; }
.pn-circle-invite-decisions { display: flex; gap: 6px; }
.pn-circle-invite-decisions button { border: 1px solid var(--pn-line); border-radius: 10px; padding: 7px 9px; background: #fff; color: var(--pn-ink); font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.pn-circle-invite-decisions button.is-approve { color: #fff; border-color: var(--pn-mode-accent, var(--pn-primary)); background: var(--pn-mode-accent, var(--pn-primary)); }
.pn-circle-invite-status { max-width: 130px; text-align: right; color: var(--pn-muted); font-size: 7.5px; line-height: 1.3; }
.pn-circle-invite-status.is-approved, .pn-circle-invite-status.is-accepted { color: var(--pn-mode-accent, var(--pn-primary)); }
@media (max-width: 640px) { .pn-circle-type-option { grid-template-columns: 40px minmax(0, 1fr) 22px; padding: 12px; } .pn-circle-invite-row { grid-template-columns: 38px minmax(0, 1fr); } .pn-circle-invite-row > img { width: 38px; height: 38px; } .pn-circle-invite-decisions, .pn-circle-invite-status { grid-column: 2; justify-self: start; max-width: none; text-align: left; } }


/* 2.15.10 — bounded conversation previews, universal helper stacking, smoother refresh status. */

/* Title/helper copy is semantic vertical copy throughout pages and modal forms. */
.pn-section-heading {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
}

.pn-section-heading > span,
.pn-section-heading > small {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.pn-section-heading small {
    display: block;
    margin: 0;
    line-height: 1.4;
}

/* Field helper copy such as “optional” must never sit beside the field title. */
.pn-field > span small {
    display: block;
    width: 100%;
    margin: 2px 0 0;
    line-height: 1.35;
    text-align: left;
}

/* Action-sheet title/subtitle stays vertically stacked even if a sheet gains
   flex/grid styling later. This includes Make a Plan and image/source sheets. */
.pn-action-sheet > .pn-eyebrow,
.pn-action-sheet > h2,
.pn-action-sheet > p {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Conversation rows use an explicit three-column boundary. Long direct
   messages and generated meetup/booking previews can never paint under time. */
.pn-conv-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) max-content;
    align-items: center;
    overflow: hidden;
}

.pn-conv-info {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.pn-conv-name,
.pn-conv-preview,
.pn-conv-activity {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-conv-preview {
    display: block;
}

.pn-conv-tail {
    min-width: max-content;
    max-width: 96px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.pn-conv-tail .pn-list-time {
    display: block;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The status bubble now eases in/out instead of flashing on location updates. */
.pn-radar-pill {
    opacity: 0;
    transform: translate(-50%, -6px);
    will-change: opacity, transform;
    transition: opacity .28s ease, transform .28s ease;
}

.pn-radar-pill.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 620px) {
    .pn-conv-item {
        grid-template-columns: 52px minmax(0, 1fr) max-content;
        gap: 10px;
    }

    .pn-conv-tail,
    .pn-conv-tail .pn-list-time {
        max-width: 82px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-radar-pill {
        transition-duration: .01ms !important;
    }
}



/* 2.15.11 — polished Circle membership cards + custom Other topic. */
#pn-circle-create-modal .pn-circle-create-form {
    text-align: left;
}

#pn-circle-create-modal .pn-circle-type-picker {
    width: 100%;
    min-width: 0;
    margin: 2px 0 4px;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}

#pn-circle-create-modal .pn-circle-type-picker > legend {
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    color: var(--pn-ink);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
    text-align: left;
}

#pn-circle-create-modal .pn-circle-type-option {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 142px;
    margin: 0;
    padding: 16px;
    border: 1px solid #e5e6ec;
    border-radius: 20px;
    background: linear-gradient(155deg, #fff 0%, #fbfbfd 100%);
    box-shadow: 0 8px 24px rgba(26, 29, 41, .045);
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 11px;
    row-gap: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#pn-circle-create-modal .pn-circle-type-option::after {
    content: "";
    position: absolute;
    inset: auto -34px -44px auto;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    opacity: 0;
    z-index: -1;
    transition: opacity .18s ease;
}

#pn-circle-create-modal .pn-circle-type-option:hover {
    transform: translateY(-2px);
    border-color: #d8dbe4;
    box-shadow: 0 12px 30px rgba(26, 29, 41, .075);
}

#pn-circle-create-modal .pn-circle-type-option.is-selected,
#pn-circle-create-modal .pn-circle-type-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 50%, #dfe1e7);
    background: linear-gradient(155deg, #fff 0%, var(--pn-mode-soft, var(--pn-primary-soft)) 160%);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 13%, transparent);
}

#pn-circle-create-modal .pn-circle-type-option.is-selected::after,
#pn-circle-create-modal .pn-circle-type-option:has(input:checked)::after {
    opacity: .8;
}

#pn-circle-create-modal .pn-circle-type-option > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

#pn-circle-create-modal .pn-circle-type-icon {
    grid-column: 1;
    grid-row: 1;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #f1f2f6;
    color: #5b5e69;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

#pn-circle-create-modal .pn-circle-type-option.is-selected .pn-circle-type-icon,
#pn-circle-create-modal .pn-circle-type-option:has(input:checked) .pn-circle-type-icon {
    color: var(--pn-mode-accent, var(--pn-primary));
    background: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 11%, #fff);
    transform: scale(1.03);
}

#pn-circle-create-modal .pn-circle-type-icon .pn-icon-svg {
    width: 21px;
    height: 21px;
}

#pn-circle-create-modal .pn-circle-type-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

#pn-circle-create-modal .pn-circle-type-copy strong {
    display: block;
    width: 100%;
    color: var(--pn-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.01em;
}

#pn-circle-create-modal .pn-circle-type-copy small {
    display: block;
    width: 100%;
    color: var(--pn-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.48;
}

#pn-circle-create-modal .pn-circle-type-option > i {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 23px;
    height: 23px;
    margin: 1px 0 0;
    border: 1.5px solid #d9dbe3;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 7px rgba(24, 26, 36, .04);
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

#pn-circle-create-modal .pn-circle-type-option.is-selected > i,
#pn-circle-create-modal .pn-circle-type-option:has(input:checked) > i {
    border-color: var(--pn-mode-accent, var(--pn-primary));
    background: var(--pn-mode-accent, var(--pn-primary));
    color: #fff;
    transform: scale(1.05);
}

#pn-circle-create-modal .pn-circle-type-option > i .pn-icon-svg {
    width: 13px;
    height: 13px;
}

#pn-circle-custom-topic[hidden] {
    display: none !important;
}

#pn-circle-create-modal .pn-circle-custom-topic {
    min-width: 0;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 18%, var(--pn-line));
    border-radius: 19px;
    background: linear-gradient(145deg, #fff 0%, var(--pn-mode-soft, var(--pn-primary-soft)) 210%);
    display: grid;
    gap: 12px;
}

#pn-circle-create-modal .pn-circle-custom-topic-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

#pn-circle-create-modal .pn-circle-custom-topic-heading strong {
    color: var(--pn-ink);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.3;
}

#pn-circle-create-modal .pn-circle-custom-topic-heading small {
    color: var(--pn-muted);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;
}

#pn-circle-create-modal .pn-circle-custom-topic-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

#pn-circle-create-modal .pn-circle-emoji-field .pn-input {
    padding-inline: 8px;
    text-align: center;
    font-size: 23px;
    line-height: 1;
}

#pn-circle-create-modal .pn-circle-emoji-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#pn-circle-create-modal .pn-circle-emoji-quick button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e4e5eb;
    border-radius: 11px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 3px 9px rgba(20, 23, 34, .035);
    display: grid;
    place-items: center;
    font: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

#pn-circle-create-modal .pn-circle-emoji-quick button:hover,
#pn-circle-create-modal .pn-circle-emoji-quick button.is-selected {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 45%, #e4e5eb);
    background: var(--pn-mode-soft, var(--pn-primary-soft));
}

@media (max-width: 640px) {
    #pn-circle-create-modal .pn-circle-type-picker {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #pn-circle-create-modal .pn-circle-type-option {
        min-height: 0;
        padding: 14px;
        grid-template-columns: 44px minmax(0, 1fr) 24px;
        grid-template-rows: auto;
        align-items: center;
        row-gap: 0;
    }

    #pn-circle-create-modal .pn-circle-type-icon {
        width: 44px;
        height: 44px;
    }

    #pn-circle-create-modal .pn-circle-type-copy {
        grid-column: 2;
        grid-row: 1;
        gap: 3px;
    }

    #pn-circle-create-modal .pn-circle-type-copy strong {
        font-size: 12px;
    }

    #pn-circle-create-modal .pn-circle-type-copy small {
        font-size: 9px;
        line-height: 1.42;
    }

    #pn-circle-create-modal .pn-circle-custom-topic-grid {
        grid-template-columns: 82px minmax(0, 1fr);
    }
}

@media (max-width: 390px) {
    #pn-circle-create-modal .pn-circle-type-option {
        grid-template-columns: 40px minmax(0, 1fr) 22px;
        padding: 12px;
        gap: 9px;
    }

    #pn-circle-create-modal .pn-circle-type-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    #pn-circle-create-modal .pn-circle-custom-topic-grid {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
    }
}

/* === v2.15.13 elevated + enlarged Discover bottom-nav action === */
#pn-app .pn-bottom-nav-reference {
    overflow: visible;
}

#pn-app .pn-bottom-nav-reference .pn-nav-item-primary {
    width: 74px;
    height: 74px;
    margin-top: -38px;
}

#pn-app .pn-bottom-nav-reference .pn-nav-item-primary .pn-icon-svg {
    width: 31px;
    height: 31px;
}

#pn-app .pn-bottom-nav-reference .pn-nav-item-primary > i {
    top: 9px;
    right: 10px;
}

@media (max-width: 860px) {
    #pn-app .pn-bottom-nav-reference .pn-nav-item-primary {
        width: 74px;
        height: 74px;
        margin-top: -38px;
    }
}

/* 2.15.17 — incoming Nudge celebration -------------------------------- */
.pn-incoming-splash-overlay {
    --pn-incoming-a: #ff8c7e;
    --pn-incoming-b: #ff617b;
    --pn-incoming-c: #ff456d;
    z-index: 100061;
    padding: 18px;
    background: rgba(23, 17, 28, .48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pn-incoming-splash-overlay[data-connection-mode="platonic"] {
    --pn-incoming-a: #a997ff;
    --pn-incoming-b: #806cf7;
    --pn-incoming-c: #5b49e6;
}

.pn-incoming-splash-overlay[data-connection-mode="business"] {
    --pn-incoming-a: #65d8cd;
    --pn-incoming-b: #20aea3;
    --pn-incoming-c: #0b827a;
}

.pn-incoming-splash {
    position: relative;
    width: min(100%, 430px);
    min-height: 650px;
    max-height: min(900px, calc(100dvh - 36px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 58px 30px 28px;
    border-radius: 36px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .18), transparent 25%),
        radial-gradient(circle at 12% 58%, rgba(255, 255, 255, .10), transparent 24%),
        linear-gradient(155deg, var(--pn-incoming-a), var(--pn-incoming-b) 52%, var(--pn-incoming-c));
    box-shadow: 0 32px 90px rgba(23, 13, 35, .35);
    isolation: isolate;
}

.pn-incoming-splash::before,
.pn-incoming-splash::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    pointer-events: none;
}

.pn-incoming-splash::before { left: -96px; top: 220px; }
.pn-incoming-splash::after { right: -96px; top: 245px; }

.pn-incoming-splash-back {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 20px;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
}

.pn-incoming-splash-copy { text-align: center; }

.pn-incoming-splash-copy h2 {
    margin: 20px 0 8px;
    color: #fff;
    font-size: clamp(29px, 7vw, 38px);
    line-height: 1;
    letter-spacing: -.045em;
}

.pn-incoming-splash-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.5;
}

.pn-incoming-splash-copy p strong { color: #fff; }

.pn-incoming-splash-portrait {
    position: relative;
    width: 184px;
    height: 184px;
    margin: 28px auto 12px;
}

.pn-incoming-splash-photo {
    width: 184px;
    height: 184px;
    padding: 7px;
    border: 3px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    box-shadow: 0 16px 38px rgba(89, 20, 54, .18), inset 0 0 0 5px rgba(255, 255, 255, .15);
    display: block;
}

.pn-incoming-splash-photo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.pn-incoming-splash-mode {
    position: absolute;
    right: -3px;
    bottom: 11px;
    width: 54px;
    height: 54px;
    border: 4px solid rgba(255, 255, 255, .94);
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 28px rgba(70, 19, 51, .18);
    backdrop-filter: blur(12px);
}

.pn-incoming-splash-mode .pn-icon-svg { width: 25px; height: 25px; }

.pn-incoming-splash-meta {
    margin-bottom: 20px;
    display: grid;
    justify-items: center;
    gap: 3px;
    text-align: center;
}

.pn-incoming-splash-meta strong {
    color: #fff;
    font-size: 10px;
    letter-spacing: .1em;
}

.pn-incoming-splash-meta small {
    color: rgba(255, 255, 255, .78);
    font-size: 10px;
}

.pn-incoming-splash-shared {
    display: grid;
    gap: 10px;
    text-align: center;
}

.pn-incoming-splash-shared > small {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 650;
}

.pn-incoming-splash-interest-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pn-incoming-splash-interest-list span {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 750;
    backdrop-filter: blur(10px);
}

.pn-incoming-splash-note,
.pn-incoming-splash-value,
.pn-incoming-splash-connect-card {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 20px;
    background: rgba(255, 255, 255, .68);
    color: #342633;
    box-shadow: 0 16px 40px rgba(75, 23, 53, .10);
    backdrop-filter: blur(18px);
}

.pn-incoming-splash-note[hidden],
.pn-incoming-splash-value[hidden] { display: none !important; }

.pn-incoming-splash-note small {
    color: #6b5666;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
}

.pn-incoming-splash-note p {
    margin: 5px 0 0;
    color: #342633;
    font-size: 11px;
    line-height: 1.5;
}

.pn-incoming-splash-value {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pn-incoming-splash-value > .pn-icon-svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: var(--pn-incoming-c);
}

.pn-incoming-splash-value > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.pn-incoming-splash-value strong { color: #342633; font-size: 12px; }
.pn-incoming-splash-value small { color: #665661; font-size: 10px; line-height: 1.4; }

.pn-incoming-splash-connect-card {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pn-incoming-splash-connect-card > span:first-child {
    min-width: 0;
    display: grid;
    gap: 5px;
    text-align: left;
}

.pn-incoming-splash-connect-card strong { font-size: 12px; }
.pn-incoming-splash-connect-card small { color: #5e4c59; font-size: 11px; line-height: 1.45; }

.pn-incoming-splash-connect-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.48));
    color: var(--pn-incoming-c);
    display: grid;
    place-items: center;
}

.pn-incoming-splash-connect-icon .pn-icon-svg { width: 26px; height: 26px; }

.pn-incoming-splash-actions {
    margin-top: 24px;
    display: grid;
    gap: 2px;
}

.pn-incoming-splash-actions .pn-btn-primary {
    min-height: 54px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .20);
    color: #fff !important;
    box-shadow: none;
    backdrop-filter: blur(16px);
}

.pn-incoming-splash-actions .pn-btn-primary:hover { background: rgba(255, 255, 255, .27); box-shadow: none; }
.pn-incoming-splash-actions .pn-text-button { min-height: 38px; color: #fff !important; opacity: .94; }
.pn-incoming-splash-actions #pn-incoming-profile-button { font-weight: 750; }
.pn-incoming-splash #pn-incoming-reply-message { color: #fff; text-align: center; }

@media (max-width: 620px) {
    #pn-incoming-nudge-modal.pn-incoming-splash-overlay {
        top: var(--pn-visual-viewport-offset);
        bottom: auto;
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
        padding: 10px;
        overflow-y: auto;
        align-items: center;
        justify-content: center;
    }

    .pn-incoming-splash {
        width: 100%;
        min-height: min(650px, calc(var(--pn-visual-viewport-height) - 20px));
        max-height: calc(var(--pn-visual-viewport-height) - 20px);
        padding: 54px 22px 22px;
        border-radius: 30px;
    }

    .pn-incoming-splash-portrait,
    .pn-incoming-splash-photo {
        width: 166px;
        height: 166px;
    }

    .pn-incoming-splash-mode {
        width: 50px;
        height: 50px;
    }
}



/* === 2.15.18 self public-profile preview ============================== */
.pn-me-marker { cursor: pointer; }
.pn-public-preview-banner {
    width: 100%;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--pn-primary) 20%, var(--pn-line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--pn-primary) 6%, white);
    color: var(--pn-ink);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pn-public-preview-banner > span {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pn-primary) 12%, white);
    color: var(--pn-primary);
    display: grid;
    place-items: center;
}
.pn-public-preview-banner .pn-icon-svg { width: 16px; height: 16px; }
.pn-public-preview-banner > div { min-width: 0; display: grid; gap: 3px; }
.pn-public-preview-banner strong { font-size: 13px; line-height: 1.25; }
.pn-public-preview-banner small { color: var(--pn-muted); font-size: 10px; line-height: 1.45; }

@media (max-width: 760px) {
    .pn-mobile-profile-preview-badge {
        position: absolute;
        z-index: 4;
        top: calc(18px + env(safe-area-inset-top, 0px));
        right: 16px;
        min-height: 34px;
        padding: 0 11px;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 999px;
        background: rgba(13,14,18,.34);
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .01em;
        backdrop-filter: blur(10px);
    }
    .pn-mobile-profile-preview-badge .pn-icon-svg { width: 14px; height: 14px; }
    .pn-mobile-profile-nudge-sheet.is-profile-preview { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
    .pn-mobile-profile-preview-note {
        min-height: 46px;
        padding: 11px 13px;
        border-radius: 15px;
        background: #f6f5f7;
        color: #686a75;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 10px;
        line-height: 1.45;
    }
    .pn-mobile-profile-preview-note .pn-icon-svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--pn-profile-mode); }
}

/* === 2.15.19 immersive public-profile hero =========================== */
#pn-public-profile-modal:not(.pn-mobile-public-profile-modal) .pn-profile-sheet {
    overflow-x: hidden;
}

#pn-public-profile-modal:not(.pn-mobile-public-profile-modal) .pn-sheet-close {
    z-index: 30;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(12,14,20,.30);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pn-public-profile-hero {
    --pn-public-hero-accent: #ff3d6e;
    position: relative;
    min-height: 340px;
    height: min(52vh, 460px);
    margin: -28px -28px 20px;
    overflow: hidden;
    border-radius: 28px 28px 24px 24px;
    background-color: #e9e9ef;
    background-position: center 28%;
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
}

.pn-public-profile-hero.is-platonic { --pn-public-hero-accent: #7462f5; }
.pn-public-profile-hero.is-business { --pn-public-hero-accent: #119c92; }
.pn-public-profile-hero.is-all { --pn-public-hero-accent: #5b6072; }

.pn-public-profile-hero-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7,8,12,.12) 0%, transparent 42%, rgba(7,8,12,.18) 60%, rgba(7,8,12,.82) 100%);
}

.pn-public-profile-hero-identity {
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 28px;
    left: 28px;
    display: grid;
    justify-items: center;
    gap: 9px;
    text-align: center;
}

.pn-public-profile-hero-mode,
.pn-mobile-profile-mode {
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;
    background: rgba(15,16,22,.38);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pn-public-profile-hero-mode .pn-icon-svg,
.pn-mobile-profile-mode .pn-icon-svg {
    width: 15px;
    height: 15px;
    color: var(--pn-public-hero-accent, var(--pn-profile-mode, #ff3d6e));
}

.pn-public-profile-hero .pn-public-profile-name {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 5vw, 42px);
    line-height: 1;
    letter-spacing: -.045em;
    text-shadow: 0 3px 18px rgba(0,0,0,.28);
}

.pn-public-profile-body {
    min-width: 0;
}

.pn-public-profile-body > .pn-public-profile-meta {
    margin-top: 0;
    text-align: center;
}

.pn-public-profile-body > .pn-public-preview-banner {
    margin-top: 0;
}

@media (max-width: 760px) {
    .pn-mobile-profile-hero {
        background-position: center 24%;
    }

    .pn-mobile-profile-identity {
        right: 18px;
        bottom: 78px;
        left: 18px;
        justify-items: center;
        gap: 5px;
        text-align: center;
    }

    .pn-mobile-profile-mode {
        --pn-public-hero-accent: var(--pn-profile-mode);
        min-height: 31px;
        margin-bottom: 2px;
        padding: 0 11px;
        background: rgba(13,14,18,.44);
        font-size: 9px;
    }

    .pn-mobile-profile-identity h2 {
        font-size: 30px;
        line-height: 1.02;
        text-align: center;
    }

    .pn-mobile-profile-identity small,
    .pn-mobile-profile-identity em {
        justify-content: center;
        text-align: center;
    }

    .pn-mobile-profile-person-meta {
        font-size: 10px !important;
        font-weight: 760 !important;
    }

    .pn-mobile-profile-distance {
        color: rgba(255,255,255,.88) !important;
        font-size: 9px !important;
    }

    .pn-mobile-profile-chips {
        right: 14px;
        bottom: 17px;
        left: 14px;
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: auto;
        padding: 1px 0;
        scrollbar-width: none;
    }

    .pn-mobile-profile-chips::-webkit-scrollbar { display: none; }
    .pn-mobile-profile-chips span { flex: 0 0 auto; }
}

/* === 2.15.20 persistent matched/chat map markers ===================== */
.pn-connected-marker > div {
    box-shadow: 0 0 0 4px rgba(55, 133, 255, .16), 0 8px 22px rgba(21, 18, 30, .24) !important;
}

.pn-marker-connection {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #377fff;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(25, 68, 145, .26);
    z-index: 3;
}

.pn-marker-connection .pn-icon-svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.4;
}

.pn-map-connected-card .pn-map-meta {
    font-weight: 750;
}

.pn-map-connected-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.pn-map-card .pn-map-connected-actions .pn-btn {
    width: 100%;
    margin-top: 0;
}

.pn-map-available-actions {
    grid-template-columns: 1fr;
}

@media (max-width: 480px) {
    .pn-map-connected-actions {
        grid-template-columns: 1fr;
    }
}


/* === 2.15.21 Circle geographic reach ================================== */
.pn-circle-reach-picker {
    min-width: 0;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    text-align: left;
}
.pn-circle-reach-picker > legend {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 2px;
    padding: 0;
    color: var(--pn-ink);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
}
.pn-circle-reach-option {
    position: relative;
    min-width: 0;
    min-height: 116px;
    padding: 14px;
    border: 1px solid #e3e5eb;
    border-radius: 18px;
    background: linear-gradient(150deg, #fff, #fafbfc);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    row-gap: 9px;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.pn-circle-reach-option:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(24,28,38,.055); }
.pn-circle-reach-option > input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.pn-circle-reach-option.is-selected,
.pn-circle-reach-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 48%, #dfe2e8);
    background: linear-gradient(155deg, #fff 0%, var(--pn-mode-soft, var(--pn-primary-soft)) 175%);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 10%, transparent);
}
.pn-circle-reach-icon {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: #f1f2f6;
    color: #5f6370;
    display: grid;
    place-items: center;
}
.pn-circle-reach-option.is-selected .pn-circle-reach-icon,
.pn-circle-reach-option:has(input:checked) .pn-circle-reach-icon { background: var(--pn-mode-soft, var(--pn-primary-soft)); color: var(--pn-mode-accent, var(--pn-primary)); }
.pn-circle-reach-icon .pn-icon-svg { width: 19px; height: 19px; }
.pn-circle-reach-copy { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pn-circle-reach-copy strong { display: block; color: var(--pn-ink); font-size: 12px; font-weight: 850; line-height: 1.3; }
.pn-circle-reach-copy small { display: block; color: var(--pn-muted); font-size: 9px; font-weight: 600; line-height: 1.45; }
.pn-circle-reach-option > i {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 22px;
    height: 22px;
    border: 1.5px solid #d8dbe2;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    display: grid;
    place-items: center;
}
.pn-circle-reach-option.is-selected > i,
.pn-circle-reach-option:has(input:checked) > i { border-color: var(--pn-mode-accent, var(--pn-primary)); background: var(--pn-mode-accent, var(--pn-primary)); color: #fff; }
.pn-circle-reach-option > i .pn-icon-svg { width: 12px; height: 12px; }
.pn-circle-local-access[hidden] { display: none !important; }
.pn-circle-local-access {
    min-width: 0;
    margin-top: 1px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 18%, var(--pn-line));
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 0%, var(--pn-mode-soft, var(--pn-primary-soft)) 210%);
    display: grid;
    gap: 11px;
}
.pn-circle-local-access-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pn-circle-local-access-heading strong { color: var(--pn-ink); font-size: 11px; font-weight: 850; }
.pn-circle-local-access-heading small,
.pn-circle-location-privacy { display: block; color: var(--pn-muted); font-size: 8.5px; font-weight: 600; line-height: 1.45; }
.pn-circle-location-actions { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pn-circle-location-actions .pn-btn { display: inline-flex; align-items: center; gap: 6px; }
.pn-circle-location-actions .pn-icon-svg { width: 14px; height: 14px; }
.pn-circle-pin-summary {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 20%, var(--pn-line));
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    color: var(--pn-mode-accent, var(--pn-primary));
}
.pn-circle-pin-summary.is-empty { border-style: dashed; color: var(--pn-muted); }
.pn-circle-pin-summary > .pn-icon-svg { width: 20px; height: 20px; justify-self: center; }
.pn-circle-pin-summary > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pn-circle-pin-summary strong { color: var(--pn-ink); font-size: 9.5px; font-weight: 850; }
.pn-circle-pin-summary small { color: var(--pn-muted); font-size: 8px; line-height: 1.35; }
#pn-circle-access-modal { z-index: 100096 !important; }
.pn-circle-access-sheet { width: min(100%, 610px); max-height: min(90dvh, 780px); overflow-y: auto; }
.pn-circle-access-form { text-align: left; }
.pn-circle-reach-mark {
    position: absolute;
    right: 9px;
    bottom: 8px;
    z-index: 4;
    max-width: calc(100% - 18px);
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(14,18,28,.70);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 6.8px;
    font-weight: 850;
    line-height: 1;
    backdrop-filter: blur(8px);
}
.pn-circle-reach-mark .pn-icon-svg { width: 9px; height: 9px; flex: 0 0 auto; }
.pn-circle-photo-cover .pn-circle-reach-mark + .pn-circle-unread { top: 7px; right: 7px; }

@media (max-width: 640px) {
    .pn-circle-reach-picker { grid-template-columns: 1fr; gap: 9px; }
    .pn-circle-reach-option { min-height: 0; grid-template-columns: 40px minmax(0, 1fr) 22px; grid-template-rows: auto; align-items: center; }
    .pn-circle-reach-copy { grid-column: 2; grid-row: 1; gap: 3px; }
    .pn-circle-reach-option > i { grid-column: 3; grid-row: 1; }
    .pn-circle-location-actions { align-items: stretch; }
    .pn-circle-location-actions .pn-btn { flex: 1 1 auto; justify-content: center; }
}

/* === 2.15.24 Existing Circle management + member list repair ========== */
.pn-circle-members-sheet {
    width: min(100%, 620px);
    max-height: min(90dvh, 820px);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}

.pn-circle-members-sheet > .pn-eyebrow,
.pn-circle-members-sheet > h2,
.pn-circle-members-sheet > .pn-circle-members-intro {
    display: block;
    width: 100%;
    text-align: left;
}

.pn-circle-members-sheet > h2 { margin-bottom: 4px; }
.pn-circle-members-intro {
    margin: 0;
    color: var(--pn-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}

.pn-circle-members-reach[hidden] { display: none !important; }
.pn-circle-members-reach {
    min-width: 0;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid var(--pn-line);
    border-radius: 20px;
    background: #fff;
    display: grid;
    gap: 12px;
}

.pn-circle-members-reach-heading {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pn-circle-members-reach-heading > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.pn-circle-members-reach-heading strong {
    display: block;
    color: var(--pn-ink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}

.pn-circle-members-reach-heading small {
    display: block;
    max-width: 390px;
    color: var(--pn-muted);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.45;
}

.pn-circle-members-reach-status {
    flex: 0 0 auto;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    color: var(--pn-mode-accent, var(--pn-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.pn-circle-members-reach-options {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.pn-circle-members-reach-option {
    position: relative;
    min-width: 0;
    min-height: 92px;
    padding: 12px;
    border: 1px solid #e4e6eb;
    border-radius: 16px;
    background: #fafbfc;
    color: var(--pn-ink);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    align-items: start;
    gap: 9px;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.pn-circle-members-reach-option:hover,
.pn-circle-members-reach-option:focus-visible {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 34%, #e4e6eb);
    background: #fff;
    transform: translateY(-1px);
}

.pn-circle-members-reach-option.is-selected {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 52%, #dfe2e8);
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 8%, transparent);
}

.pn-circle-members-reach-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eef0f4;
    color: #626673;
    display: grid;
    place-items: center;
}

.pn-circle-members-reach-option.is-selected .pn-circle-members-reach-icon {
    background: rgba(255,255,255,.78);
    color: var(--pn-mode-accent, var(--pn-primary));
}

.pn-circle-members-reach-icon .pn-icon-svg { width: 17px; height: 17px; }
.pn-circle-members-reach-option > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pn-circle-members-reach-option strong {
    display: block;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.3;
}
.pn-circle-members-reach-option small {
    display: block;
    color: var(--pn-muted);
    font-size: 8px;
    font-weight: 600;
    line-height: 1.4;
}
.pn-circle-members-reach-option > i {
    width: 20px;
    height: 20px;
    border: 1.5px solid #d6d9e0;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    display: grid;
    place-items: center;
}
.pn-circle-members-reach-option.is-selected > i {
    border-color: var(--pn-mode-accent, var(--pn-primary));
    background: var(--pn-mode-accent, var(--pn-primary));
    color: #fff;
}
.pn-circle-members-reach-option > i .pn-icon-svg { width: 11px; height: 11px; }

.pn-circle-members-reach-edit {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--pn-line);
    border-radius: 13px;
    background: #fff;
    color: var(--pn-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}
.pn-circle-members-reach-edit:hover,
.pn-circle-members-reach-edit:focus-visible {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 38%, var(--pn-line));
    color: var(--pn-mode-accent, var(--pn-primary));
}
.pn-circle-members-reach-edit > span { font-size: 18px; line-height: 1; }

.pn-circle-members-list-heading {
    margin: 18px 2px 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.pn-circle-members-list-heading strong {
    color: var(--pn-ink);
    font-size: 10px;
    font-weight: 900;
}
.pn-circle-members-list-heading small {
    color: var(--pn-muted);
    font-size: 8px;
    font-weight: 700;
}

.pn-circle-members-list {
    min-width: 0;
    min-height: 120px;
    max-height: 44dvh;
    margin-top: 0;
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: #f7f8fa;
    display: grid;
    align-content: start;
    gap: 6px;
}

.pn-circle-member {
    width: 100%;
    min-width: 0;
    min-height: 66px;
    margin: 0;
    padding: 10px;
    border: 1px solid #e7e8ed;
    border-radius: 14px;
    background: #fff;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}
.pn-circle-member + .pn-circle-member { border-top: 1px solid #e7e8ed; }
.pn-circle-member.is-owner { border-color: #f1dbe2; }
.pn-circle-member.is-moderator { border-color: #e4e0f8; }

.pn-circle-member-avatar {
    width: 44px;
    height: 44px;
    flex: none;
}
.pn-circle-member-avatar img { border-radius: 13px; }

.pn-circle-member-copy {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    overflow: hidden;
}
.pn-circle-member-name {
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.pn-circle-member-name strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--pn-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1.25;
}
.pn-circle-member-copy > small {
    display: block;
    width: 100%;
    overflow: hidden;
    color: var(--pn-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 650;
    line-height: 1.35;
}
.pn-circle-role-badge {
    flex: 0 0 auto;
    min-height: 19px;
    padding: 0 7px;
    font-size: 7px;
}
.pn-circle-member-role-button {
    width: auto;
    max-width: 124px;
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    font-size: 7.5px;
}

@media (max-width: 620px) {
    .pn-circle-members-sheet { width: min(100%, 100vw); max-height: 92dvh; }
    .pn-circle-members-reach-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pn-circle-members-reach-options { grid-template-columns: 1fr; }
    .pn-circle-members-reach-option { min-height: 0; align-items: center; }
    .pn-circle-members-list { max-height: 42dvh; padding: 5px; }
    .pn-circle-member {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
    }
    .pn-circle-member-role-button {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        min-height: 36px;
        margin-top: 1px;
    }
}


/* === 2.15.25 Existing Circle membership access ======================== */
.pn-circle-members-visibility {
    margin-top: 18px;
}
.pn-circle-members-visibility-note {
    display: block;
    width: 100%;
    color: var(--pn-muted);
    font-size: 8px;
    font-weight: 650;
    line-height: 1.45;
}
.pn-circle-members-visibility .pn-circle-members-reach-option.is-saving {
    opacity: .7;
}
.pn-circle-members-visibility .pn-circle-members-reach-option:disabled {
    cursor: wait;
}

/* Native App Store shell -------------------------------------------------- */
.pn-native-app .pn-install-app-card,
.pn-native-app [data-pn-install-app],
.pn-native-app #pn-install-app-modal {
    display: none !important;
}
.pn-native-membership-note {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 61, 110, .18);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 61, 110, .08), rgba(255, 125, 96, .05));
}
.pn-native-membership-note strong { font-size: 15px; color: #17171d; }
.pn-native-membership-note small { color: #6f7180; line-height: 1.45; }
.pn-native-free-plan .pn-auth-plan { max-width: 520px; margin-inline: auto; }

/* Store-account deletion */
.pn-danger-setting{color:#b4233c}.pn-danger-setting .pn-setting-icon{background:#fff0f2;color:#c72d49}.pn-delete-account-modal{max-width:560px}.pn-delete-account-copy{display:grid;gap:16px}.pn-delete-account-copy>p{margin:0;color:var(--pn-muted,#6f6b74);line-height:1.6}.pn-btn-danger{background:#bd2945!important;color:#fff!important;border-color:#bd2945!important}.pn-btn-danger:hover{filter:brightness(.96)}

/* === v2.15.28 mode-aware premium logged-in shell ======================= */
/*
 * The logged-in map shell now uses one adaptive glass system driven by
 * data-discovery-view. This keeps Romance, Friends, Business and View All
 * visually distinct without duplicating markup or altering map/data logic.
 */
#pn-app {
    --pn-shell-a: #ff4f7b;
    --pn-shell-b: #d72f64;
    --pn-shell-c: #ff8b78;
    --pn-shell-glow: rgba(255, 79, 123, .42);
    --pn-shell-edge: rgba(255,255,255,.28);
    --pn-shell-soft: rgba(255,255,255,.12);
    --pn-shell-soft-strong: rgba(255,255,255,.21);
    --pn-shell-muted-icon: rgba(255,255,255,.70);
    --pn-shell-top-bg:
        radial-gradient(circle at 9% 0%, rgba(255,255,255,.20), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(255,151,123,.22), transparent 31%),
        linear-gradient(135deg, #ff657f 0%, #d53666 53%, #a51f54 100%);
    --pn-shell-bar-bg:
        linear-gradient(135deg, rgba(255,103,132,.94), rgba(179,35,86,.94));
    --pn-shell-bottom-bg:
        radial-gradient(circle at 48% -60%, rgba(255,255,255,.24), transparent 46%),
        linear-gradient(135deg, rgba(202,41,91,.97), rgba(126,24,69,.98));
    --pn-shell-active-bg: linear-gradient(145deg, #ff6687, #e92e68);
    --pn-tab-accent: #ff4f7b;
    --pn-tab-accent-strong: #d72f64;
}

#pn-app[data-discovery-view="platonic"] {
    --pn-shell-a: #4b7cff;
    --pn-shell-b: #293ec6;
    --pn-shell-c: #765eed;
    --pn-shell-glow: rgba(75,124,255,.42);
    --pn-shell-top-bg:
        radial-gradient(circle at 14% -4%, rgba(93,171,255,.30), transparent 34%),
        radial-gradient(circle at 90% 5%, rgba(117,94,237,.28), transparent 33%),
        linear-gradient(135deg, #183c9f 0%, #222975 53%, #181345 100%);
    --pn-shell-bar-bg:
        linear-gradient(135deg, rgba(49,84,195,.95), rgba(35,36,112,.96));
    --pn-shell-bottom-bg:
        radial-gradient(circle at 48% -55%, rgba(93,151,255,.28), transparent 47%),
        linear-gradient(135deg, rgba(30,67,173,.98), rgba(26,27,96,.99));
    --pn-shell-active-bg: linear-gradient(145deg, #4c83ff, #5546e9);
    --pn-tab-accent: #4b7cff;
    --pn-tab-accent-strong: #3f43db;
}

#pn-app[data-discovery-view="business"] {
    --pn-shell-a: #20c7b9;
    --pn-shell-b: #087d77;
    --pn-shell-c: #3ee1cf;
    --pn-shell-glow: rgba(30,199,185,.40);
    --pn-shell-top-bg:
        radial-gradient(circle at 10% -5%, rgba(73,238,218,.24), transparent 34%),
        radial-gradient(circle at 90% 5%, rgba(22,172,160,.24), transparent 33%),
        linear-gradient(135deg, #04595a 0%, #063f46 54%, #042c36 100%);
    --pn-shell-bar-bg:
        linear-gradient(135deg, rgba(8,101,101,.96), rgba(5,62,72,.96));
    --pn-shell-bottom-bg:
        radial-gradient(circle at 48% -56%, rgba(62,225,207,.24), transparent 47%),
        linear-gradient(135deg, rgba(5,89,91,.98), rgba(3,49,61,.99));
    --pn-shell-active-bg: linear-gradient(145deg, #2bc9bb, #0b8c84);
    --pn-tab-accent: #19b8ad;
    --pn-tab-accent-strong: #087d77;
}

#pn-app[data-discovery-view="all"] {
    --pn-shell-a: #41d7d0;
    --pn-shell-b: #6d55ff;
    --pn-shell-c: #ff4b9a;
    --pn-shell-glow: rgba(96,105,255,.43);
    --pn-shell-top-bg:
        radial-gradient(circle at 5% 3%, rgba(36,223,213,.34), transparent 31%),
        radial-gradient(circle at 94% 10%, rgba(255,65,151,.30), transparent 34%),
        radial-gradient(circle at 55% -15%, rgba(90,97,255,.28), transparent 38%),
        linear-gradient(130deg, #061c37 0%, #151743 47%, #31144d 100%);
    --pn-shell-bar-bg:
        radial-gradient(circle at 8% 50%, rgba(28,218,205,.20), transparent 30%),
        radial-gradient(circle at 94% 50%, rgba(255,69,158,.20), transparent 34%),
        linear-gradient(125deg, rgba(14,39,67,.97), rgba(34,25,73,.97));
    --pn-shell-bottom-bg:
        radial-gradient(circle at 4% 20%, rgba(34,223,211,.25), transparent 32%),
        radial-gradient(circle at 96% 18%, rgba(255,66,155,.25), transparent 33%),
        linear-gradient(125deg, rgba(7,33,59,.99), rgba(37,20,68,.99));
    --pn-shell-active-bg: linear-gradient(135deg, #27d9d0 0%, #526cff 45%, #9c55ef 72%, #ff4b99 100%);
    --pn-tab-accent: #6571ff;
    --pn-tab-accent-strong: #b64ee2;
}

/* Header: dark, luminous, connection-aware glass instead of white chrome. */
#pn-app > .pn-app-header.pn-nearby-reference-header {
    min-height: 84px;
    height: 84px;
    padding: 13px 18px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: var(--pn-shell-top-bg);
    color: #fff;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--pn-shell-b) 26%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    transition: background .34s ease, box-shadow .34s ease;
}

#pn-app .pn-nearby-brand { color: #fff; }
#pn-app .pn-nearby-brand .pn-brand-mark {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 10px 28px color-mix(in srgb, var(--pn-shell-a) 35%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
#pn-app .pn-nearby-brand .pn-brand-mark .pn-icon-svg { color: #fff; stroke: currentColor; }
#pn-app .pn-nearby-brand strong { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.16); }
#pn-app .pn-nearby-brand small { color: rgba(255,255,255,.72); }

#pn-app .pn-header-actions .pn-icon-button,
#pn-app .pn-header-actions .pn-status-pill {
    border: 1px solid rgba(255,255,255,.23);
    background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.075));
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 11px 26px rgba(0,0,0,.16);
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    backdrop-filter: blur(15px) saturate(130%);
}
#pn-app .pn-header-actions .pn-icon-button .pn-icon-svg,
#pn-app .pn-header-actions .pn-status-pill { color: #fff; }
#pn-app .pn-header-actions .pn-status-pill .pn-status-dot {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.15);
}
#pn-app .pn-header-actions .pn-icon-button:hover,
#pn-app .pn-header-actions .pn-icon-button:focus-visible {
    border-color: rgba(255,255,255,.42);
    background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.11));
    color: #fff;
}
#pn-app .pn-header-actions #pn-visibility-toggle.is-active {
    border-color: rgba(255,255,255,.48);
    background: rgba(255,255,255,.24);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 11px 28px rgba(0,0,0,.18);
}
#pn-app .pn-header-notification-badge {
    border-color: rgba(255,255,255,.96);
    background: #ff426f;
    box-shadow: 0 4px 12px rgba(85,12,43,.28);
}

/* Discovering-for glass control. */
#pn-app > .pn-live-mode-bar {
    width: min(calc(100% - 28px), 960px);
    min-height: 72px;
    margin-top: 12px;
    padding: 9px 10px 9px 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 24px;
    background: var(--pn-shell-bar-bg);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 15px 34px color-mix(in srgb, var(--pn-shell-b) 26%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    transition: background .34s ease, box-shadow .34s ease;
}
#pn-app .pn-live-mode-label span { color: rgba(255,255,255,.58); }
#pn-app .pn-live-mode-label strong { color: #fff; }
#pn-app .pn-live-mode-switch {
    padding: 4px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(1,12,22,.18);
    box-shadow: inset 0 1px 12px rgba(0,0,0,.10);
}
#pn-app .pn-live-mode-switch button {
    min-height: 45px;
    color: rgba(255,255,255,.72);
    border: 1px solid transparent;
    background: transparent;
}
#pn-app .pn-live-mode-switch button:hover { color: #fff; background: rgba(255,255,255,.06); }
#pn-app .pn-live-mode-switch button.is-active {
    color: #fff;
    border-color: rgba(255,255,255,.42);
    background: var(--pn-shell-active-bg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 8px 22px var(--pn-shell-glow),
        0 0 0 1px rgba(255,255,255,.08);
}
#pn-app .pn-live-mode-switch button .pn-icon-svg { color: currentColor; stroke: currentColor; }

#pn-app .pn-wallet-chip {
    min-width: 96px;
    min-height: 50px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.075));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 20px rgba(0,0,0,.11);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}
#pn-app .pn-wallet-chip .pn-icon-svg,
#pn-app .pn-wallet-chip strong,
#pn-app .pn-wallet-chip small { color: #fff; }
#pn-app .pn-wallet-chip strong { font-size: 15px; }
#pn-app .pn-wallet-chip small { opacity: .76; }

/* Map overlays inherit the active realm while the map itself stays calm. */
#pn-app .pn-map-safety-card {
    border: 1px solid rgba(255,255,255,.30);
    background: color-mix(in srgb, var(--pn-shell-b) 82%, transparent);
    color: #fff;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--pn-shell-b) 26%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}
#pn-app .pn-map-safety-card .pn-icon-svg,
#pn-app .pn-map-safety-card strong { color: #fff; }
#pn-app .pn-map-safety-card small { color: rgba(255,255,255,.68); }

#pn-app .pn-map-control {
    border: 1px solid rgba(255,255,255,.28);
    background: color-mix(in srgb, var(--pn-shell-a) 72%, #102231 28%);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 12px 28px color-mix(in srgb, var(--pn-shell-b) 25%, transparent);
}
#pn-app .pn-map-control .pn-icon-svg { color: #fff; stroke: currentColor; }
#pn-app .pn-map-control-primary {
    background: color-mix(in srgb, var(--pn-shell-b) 88%, #09131e 12%);
    color: #fff;
}

#pn-app .pn-radar-pill {
    border-color: rgba(255,255,255,.32);
    background: color-mix(in srgb, var(--pn-shell-b) 82%, transparent);
    color: #fff;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--pn-shell-b) 24%, transparent);
}
#pn-app .pn-radar-pulse { background: #fff; }

/* Bottom navigation: full mode-coloured chrome, white icon system. */
#pn-app .pn-bottom-nav-reference {
    border-top: 1px solid rgba(255,255,255,.18);
    background: var(--pn-shell-bottom-bg);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 -16px 36px color-mix(in srgb, var(--pn-shell-b) 20%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    transition: background .34s ease, box-shadow .34s ease;
}
#pn-app .pn-bottom-nav-reference .pn-nav-item:not(.pn-nav-item-primary),
#pn-app .pn-bottom-nav-reference .pn-nav-item:not(.is-active):not(.pn-nav-item-primary) {
    color: var(--pn-shell-muted-icon) !important;
    background: transparent !important;
}
#pn-app .pn-bottom-nav-reference .pn-nav-item:not(.pn-nav-item-primary) .pn-icon-svg,
#pn-app .pn-bottom-nav-reference .pn-nav-item:not(.pn-nav-item-primary) > span {
    color: currentColor !important;
    stroke: currentColor;
}
#pn-app .pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) {
    border: 1px solid rgba(255,255,255,.28);
    background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.085)) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 9px 22px rgba(0,0,0,.16);
}
#pn-app .pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) .pn-icon-svg,
#pn-app .pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) > span { color: #fff !important; }

#pn-app .pn-bottom-nav-reference .pn-nav-item-primary {
    border: 1px solid rgba(255,255,255,.48);
    background: var(--pn-shell-active-bg) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 16px 36px var(--pn-shell-glow),
        0 0 0 7px color-mix(in srgb, var(--pn-shell-a) 14%, transparent);
}
#pn-app .pn-bottom-nav-reference .pn-nav-item-primary .pn-icon-svg { color: #fff; stroke: currentColor; filter: drop-shadow(0 0 8px rgba(255,255,255,.26)); }
#pn-app .pn-bottom-nav-reference .pn-nav-item i {
    border-color: rgba(255,255,255,.96);
    background: #ff426f;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pn-shell-b) 66%, transparent);
}

/* View All gets the approved multi-mode neon treatment on focal controls. */
#pn-app[data-discovery-view="all"] .pn-brand-mark,
#pn-app[data-discovery-view="all"] .pn-live-mode-switch button.is-active,
#pn-app[data-discovery-view="all"] .pn-bottom-nav-reference .pn-nav-item-primary,
#pn-app[data-discovery-view="all"] #pn-center-me {
    background: linear-gradient(135deg, #1fd8cf 0%, #446fff 38%, #8757ef 67%, #ff4b98 100%) !important;
}

/* Make the transition between modes feel intentional instead of flashing. */
#pn-app > .pn-app-header,
#pn-app > .pn-live-mode-bar,
#pn-app .pn-wallet-chip,
#pn-app .pn-live-mode-switch button,
#pn-app .pn-map-control,
#pn-app .pn-map-safety-card,
#pn-app .pn-bottom-nav-reference,
#pn-app .pn-bottom-nav-reference .pn-nav-item {
    transition-property: background, background-color, color, border-color, box-shadow, transform;
    transition-duration: .28s;
    transition-timing-function: ease;
}

@media (max-width: 860px) {
    #pn-app > .pn-app-header.pn-nearby-reference-header {
        min-height: 76px;
        height: 76px;
        padding: 11px 13px;
    }
    #pn-app .pn-nearby-brand .pn-brand-mark {
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }
    #pn-app .pn-nearby-brand strong { font-size: 1.55rem; }
    #pn-app .pn-header-actions { gap: 7px; }
    #pn-app .pn-header-actions .pn-icon-button {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    #pn-app > .pn-live-mode-bar {
        width: calc(100% - 16px);
        min-height: 66px;
        margin-top: 7px;
        padding: 7px;
        gap: 7px;
        border-radius: 21px;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    #pn-app .pn-live-mode-switch { min-width: 0; gap: 2px; }
    #pn-app .pn-live-mode-switch button {
        min-width: 0;
        min-height: 48px;
        padding: 4px 3px;
        border-radius: 12px;
        flex-direction: column;
        gap: 3px;
        font-size: 7.5px;
        line-height: 1;
        white-space: nowrap;
    }
    #pn-app .pn-live-mode-switch button span { display: inline; }
    #pn-app .pn-live-mode-switch .pn-icon-svg { width: 18px; height: 18px; }
    #pn-app .pn-wallet-chip {
        min-width: 72px;
        min-height: 52px;
        padding: 6px 8px;
        border-radius: 15px;
    }
    #pn-app .pn-wallet-chip .pn-icon-svg { width: 17px; height: 17px; }
    #pn-app .pn-wallet-chip strong { font-size: 13px; }
    #pn-app .pn-wallet-chip small { font-size: 6.5px; }

    #pn-app .pn-bottom-nav-reference {
        padding-left: 9px;
        padding-right: 9px;
    }
}

@media (max-width: 390px) {
    #pn-app .pn-nearby-brand strong { font-size: 1.35rem; }
    #pn-app .pn-nearby-brand .pn-brand-mark { width: 40px; height: 40px; }
    #pn-app .pn-header-actions .pn-icon-button { width: 36px; height: 36px; }
    #pn-app .pn-live-mode-switch button { font-size: 6.7px; }
    #pn-app .pn-live-mode-switch .pn-icon-svg { width: 17px; height: 17px; }
    #pn-app .pn-wallet-chip { min-width: 66px; padding-inline: 6px; }
}

/* === v2.15.29 mobile logged-in brand lockup ============================ */
@media (max-width: 520px) {
    /* Older mobile rules hid the entire brand-copy span. Keep the Nudjee
       wordmark visible beside the icon, but retain the compact no-subtitle
       treatment requested for small screens. */
    #pn-app .pn-nearby-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 0 1 auto;
    }

    #pn-app .pn-nearby-brand > span:last-child {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
    }

    #pn-app .pn-nearby-brand strong {
        display: block;
        margin: 0;
        font-size: 1.05rem;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    #pn-app .pn-nearby-brand small {
        display: none !important;
    }
}

@media (max-width: 360px) {
    #pn-app .pn-nearby-brand { gap: 6px; }
    #pn-app .pn-nearby-brand .pn-brand-mark { width: 38px; height: 38px; }
    #pn-app .pn-nearby-brand strong { font-size: .92rem; letter-spacing: .04em; }
}


/* ========================================================================== 
   Nudjee 2.15.30 — Circle-first landing page showcase
   ========================================================================== */

.pn-circle-landing-grid,
.pn-circle-access-grid {
    width: min(1180px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
    align-items: center;
    gap: clamp(34px, 6vw, 82px);
}

.pn-circle-access-grid {
    grid-template-columns: minmax(430px, 1.08fr) minmax(0, .92fr);
}

.pn-circle-landing-copy {
    min-width: 0;
}

.pn-circle-landing-copy h2 {
    max-width: 670px;
    margin: 12px 0 17px;
    color: #fff;
    font-size: clamp(35px, 4.25vw, 58px);
    line-height: 1.02;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.pn-circle-landing-copy > p {
    max-width: 650px;
    margin: 0;
    color: var(--pn-landing-muted);
    font-size: 15px;
    line-height: 1.72;
}

.pn-circle-feature-list,
.pn-circle-access-points {
    margin-top: 26px;
    display: grid;
    gap: 11px;
}

.pn-circle-feature-list > span,
.pn-circle-access-points > span {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.095);
    border-radius: 17px;
    background: rgba(255,255,255,.045);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 11px;
}

.pn-circle-feature-list .pn-icon-svg,
.pn-circle-access-points .pn-icon-svg {
    grid-row: 1 / 3;
    width: 22px;
    height: 22px;
    color: #63ddd0;
    justify-self: center;
}

.pn-circle-feature-list strong,
.pn-circle-access-points b {
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}

.pn-circle-feature-list small,
.pn-circle-access-points small {
    margin-top: 2px;
    color: rgba(255,255,255,.58);
    font-size: 9px;
    line-height: 1.45;
}

.pn-circles-marketing-visual {
    position: relative;
    min-height: 465px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 32px;
    background:
        radial-gradient(circle at 12% 4%, rgba(42,201,187,.22), transparent 35%),
        radial-gradient(circle at 96% 82%, rgba(124,108,255,.18), transparent 36%),
        rgba(7,15,22,.72);
    box-shadow: 0 30px 85px rgba(0,0,0,.22);
    isolation: isolate;
}

.pn-circles-marketing-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.11) .7px, transparent .7px);
    background-size: 18px 18px;
    opacity: .2;
}

.pn-circles-visual-top,
.pn-circle-topic-strip,
.pn-marketing-circle-card,
.pn-marketing-circle-mini-grid,
.pn-circle-chat-peek {
    position: relative;
    z-index: 1;
}

.pn-circles-visual-top {
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pn-circles-visual-top > span {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.pn-circles-visual-top i {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(100,225,213,.28);
    border-radius: 12px;
    color: #74e5da;
    background: rgba(52,195,183,.1);
    display: grid;
    place-items: center;
    font-style: normal;
}

.pn-circles-visual-top i .pn-icon-svg { width: 18px; height: 18px; }
.pn-circles-visual-top b { font-size: 14px; }
.pn-circles-visual-top em {
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.075);
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
}

.pn-circle-topic-strip {
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}

.pn-circle-topic-strip span {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    color: rgba(255,255,255,.58);
    background: rgba(255,255,255,.04);
    font-size: 8px;
    font-weight: 800;
}

.pn-circle-topic-strip span.is-active {
    color: #071718;
    border-color: rgba(112,233,219,.66);
    background: linear-gradient(135deg, #74e4d7, #b5fff3);
}

.pn-marketing-circle-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: rgba(255,255,255,.075);
}

.pn-marketing-circle-hero {
    position: relative;
    height: 150px;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 33%, rgba(255,255,255,.22) 0 2%, transparent 2.5%),
        radial-gradient(circle at 24% 85%, rgba(255,184,115,.42), transparent 22%),
        linear-gradient(135deg, rgba(30,128,119,.98), rgba(29,64,80,.92) 55%, rgba(109,79,157,.88));
}

.pn-marketing-circle-hero::before,
.pn-marketing-circle-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.13);
}

.pn-marketing-circle-hero::before { width: 230px; height: 76px; right: -42px; top: 23px; transform: rotate(-18deg); }
.pn-marketing-circle-hero::after { width: 190px; height: 70px; left: 42px; bottom: -36px; transform: rotate(8deg); }

.pn-marketing-circle-emoji {
    position: absolute;
    left: 18px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px;
    background: rgba(5,16,21,.45);
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
    display: grid;
    place-items: center;
    font-size: 29px;
    backdrop-filter: blur(12px);
}

.pn-marketing-circle-badge {
    position: absolute;
    right: 14px;
    top: 14px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(5,15,21,.38);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 7.5px;
    font-weight: 850;
    backdrop-filter: blur(10px);
}

.pn-marketing-circle-badge .pn-icon-svg { width: 12px; height: 12px; }

.pn-marketing-circle-body {
    min-height: 72px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pn-marketing-circle-body > span:first-child { min-width: 0; display: grid; gap: 3px; }
.pn-marketing-circle-body strong { color: #fff; font-size: 11px; }
.pn-marketing-circle-body small { color: rgba(255,255,255,.52); font-size: 8px; }

.pn-marketing-circle-members {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.pn-marketing-circle-members i {
    width: 28px;
    height: 28px;
    margin-left: -7px;
    border: 2px solid #12262e;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ff7998, #7b6df2);
    display: grid;
    place-items: center;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
}

.pn-marketing-circle-members i:first-child { margin-left: 0; background: linear-gradient(145deg, #57d2c5, #178c84); }
.pn-marketing-circle-members i:nth-child(2) { background: linear-gradient(145deg, #ffb66c, #db6f55); }
.pn-marketing-circle-members b { margin-left: 6px; color: rgba(255,255,255,.7); font-size: 8px; }

.pn-marketing-circle-mini-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
}

.pn-marketing-circle-mini-grid article {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    gap: 9px;
}

.pn-circle-mini-emoji {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    display: grid;
    place-items: center;
    font-size: 17px;
}

.pn-marketing-circle-mini-grid article > div { min-width: 0; display: grid; gap: 3px; }
.pn-marketing-circle-mini-grid strong { color: #fff; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-marketing-circle-mini-grid small { color: rgba(255,255,255,.46); font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pn-circle-chat-peek {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 17px;
    background: rgba(255,255,255,.055);
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
}

.pn-chat-peek-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    color: #07211e;
    background: #79e1d4;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 900;
}

.pn-circle-chat-peek > div { min-width: 0; display: grid; gap: 2px; }
.pn-circle-chat-peek strong { color: #fff; font-size: 8px; }
.pn-circle-chat-peek small { color: rgba(255,255,255,.58); font-size: 7.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-chat-peek-reactions { color: #ffd8e2; font-size: 7px; font-weight: 850; white-space: nowrap; }

.pn-circle-reach-visual {
    position: relative;
    min-height: 485px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 31px;
    background: linear-gradient(150deg, rgba(17,45,51,.83), rgba(22,18,37,.78));
    box-shadow: 0 30px 80px rgba(0,0,0,.2);
}

.pn-circle-reach-map {
    position: relative;
    height: 246px;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 48% 50%, rgba(78,213,194,.22), transparent 32%),
        linear-gradient(145deg, #dfe7df, #cddbd4);
}

.pn-reach-road {
    position: absolute;
    height: 9px;
    border: 1px solid rgba(51,65,66,.1);
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 0 0 5px rgba(255,255,255,.23);
}

.pn-reach-road.road-a { width: 125%; left: -10%; top: 52%; transform: rotate(-9deg); }
.pn-reach-road.road-b { width: 82%; left: 32%; top: 29%; transform: rotate(62deg); }
.pn-reach-road.road-c { width: 60%; left: -7%; top: 78%; transform: rotate(28deg); }

.pn-reach-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(19,145,135,.58);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.pn-reach-ring.ring-a { width: 130px; height: 130px; background: rgba(55,202,187,.11); }
.pn-reach-ring.ring-b { width: 220px; height: 220px; border-style: dashed; }

.pn-reach-pin {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 47px;
    height: 47px;
    border: 4px solid rgba(255,255,255,.9);
    border-radius: 16px 16px 16px 4px;
    color: #fff;
    background: linear-gradient(145deg, #29c6b7, #0e847c);
    box-shadow: 0 12px 30px rgba(20,111,104,.32);
    display: grid;
    place-items: center;
    transform: translate(-50%,-50%) rotate(-45deg);
}

.pn-reach-pin .pn-icon-svg { width: 21px; height: 21px; transform: rotate(45deg); }

.pn-reach-person {
    position: absolute;
    z-index: 3;
    width: 31px;
    height: 31px;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg,#7c6cff,#4737b8);
    box-shadow: 0 8px 22px rgba(33,38,44,.22);
    display: grid;
    place-items: center;
    font-size: 7px;
    font-weight: 900;
}

.pn-reach-person.p-one { left: 25%; top: 33%; }
.pn-reach-person.p-two { right: 20%; top: 35%; background: linear-gradient(145deg,#ff7396,#dd2e62); }
.pn-reach-person.p-three { left: 38%; bottom: 12%; background: linear-gradient(145deg,#ffb365,#ce7b36); }

.pn-reach-radius-label {
    position: absolute;
    left: 50%;
    bottom: 12px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #0b5c56;
    background: rgba(255,255,255,.84);
    font-size: 7px;
    font-weight: 900;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

.pn-circle-reach-controls {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.pn-circle-reach-controls > div {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.pn-reach-choice {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    color: rgba(255,255,255,.58);
    background: rgba(255,255,255,.04);
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
}

.pn-reach-choice i {
    grid-row: 1 / 3;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    display: grid;
    place-items: center;
    font-style: normal;
}

.pn-reach-choice .pn-icon-svg { width: 14px; height: 14px; }
.pn-reach-choice b { color: #fff; font-size: 8px; }
.pn-reach-choice small { font-size: 6.8px; }
.pn-reach-choice.is-selected { border-color: rgba(90,224,210,.38); color: #79e4d8; background: rgba(46,193,179,.11); }

.pn-circle-member-pass {
    margin-top: 9px;
    padding: 10px 11px;
    border: 1px solid rgba(90,224,210,.2);
    border-radius: 16px;
    color: #75dfd3;
    background: rgba(43,187,174,.08);
    display: grid;
    grid-template-columns: 31px minmax(0,1fr);
    align-items: center;
    gap: 9px;
}

.pn-circle-member-pass > i {
    width: 31px;
    height: 31px;
    border-radius: 11px;
    background: rgba(87,218,205,.12);
    display: grid;
    place-items: center;
    font-style: normal;
}

.pn-circle-member-pass .pn-icon-svg { width: 17px; height: 17px; }
.pn-circle-member-pass > span { min-width: 0; display: grid; gap: 2px; }
.pn-circle-member-pass strong { color: #fff; font-size: 8px; }
.pn-circle-member-pass small { color: rgba(255,255,255,.5); font-size: 7px; line-height: 1.35; }

@media (max-width: 960px) and (min-width: 761px) {
    .pn-circle-landing-grid,
    .pn-circle-access-grid { grid-template-columns: minmax(0,.9fr) minmax(380px,1.1fr); gap: 28px; }
    .pn-circle-landing-copy h2 { font-size: clamp(34px,5vw,46px); }
    .pn-circles-marketing-visual,
    .pn-circle-reach-visual { min-height: 430px; }
}

@media (max-width: 760px) {
    .pn-landing-section.pn-circle-landing.pn-landing-slide,
    .pn-landing-section.pn-circle-access-landing.pn-landing-slide {
        padding: 24px 16px var(--pn-mobile-controls-h) !important;
        justify-content: center;
    }

    .pn-circle-landing-grid,
    .pn-circle-access-grid {
        width: 100%;
        height: 100%;
        grid-template-columns: 1fr;
        align-content: center;
        gap: 15px;
    }

    .pn-circle-access-grid .pn-circle-reach-visual { order: 2; }
    .pn-circle-access-grid .pn-circle-access-copy { order: 1; }

    .pn-circle-landing-copy .pn-eyebrow { margin-bottom: 2px; }
    .pn-circle-landing-copy h2 {
        max-width: 100%;
        margin: 7px 0 9px;
        font-size: clamp(29px, 8.7vw, 37px);
        line-height: 1.01;
    }

    .pn-circle-landing-copy > p {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.55;
    }

    .pn-circle-feature-list,
    .pn-circle-access-points {
        margin-top: 12px;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }

    .pn-circle-feature-list > span,
    .pn-circle-access-points > span {
        padding: 8px;
        border-radius: 13px;
        grid-template-columns: 25px minmax(0,1fr);
        column-gap: 6px;
    }

    .pn-circle-feature-list .pn-icon-svg,
    .pn-circle-access-points .pn-icon-svg { width: 16px; height: 16px; }
    .pn-circle-feature-list strong,
    .pn-circle-access-points b { font-size: 8px; }
    .pn-circle-feature-list small,
    .pn-circle-access-points small { font-size: 6.6px; line-height: 1.3; }

    .pn-circles-marketing-visual,
    .pn-circle-reach-visual {
        width: 100%;
        min-height: 0;
        padding: 10px;
        border-radius: 23px;
    }

    .pn-circles-visual-top { margin-bottom: 7px; }
    .pn-circles-visual-top i { width: 28px; height: 28px; border-radius: 10px; }
    .pn-circles-visual-top b { font-size: 11px; }
    .pn-circles-visual-top em { padding: 6px 8px; font-size: 6.5px; }
    .pn-circle-topic-strip { margin-bottom: 7px; gap: 5px; }
    .pn-circle-topic-strip span { padding: 5px 7px; font-size: 6.5px; }
    .pn-marketing-circle-card { border-radius: 18px; }
    .pn-marketing-circle-hero { height: 82px; }
    .pn-marketing-circle-emoji { left: 10px; bottom: 8px; width: 39px; height: 39px; border-radius: 13px; font-size: 21px; }
    .pn-marketing-circle-badge { right: 8px; top: 8px; padding: 5px 7px; font-size: 6px; }
    .pn-marketing-circle-body { min-height: 49px; padding: 8px 9px; }
    .pn-marketing-circle-body strong { font-size: 8px; }
    .pn-marketing-circle-body small { font-size: 6.5px; }
    .pn-marketing-circle-members i { width: 22px; height: 22px; font-size: 5.5px; }
    .pn-marketing-circle-members b { font-size: 6px; }
    .pn-marketing-circle-mini-grid { margin-top: 6px; gap: 6px; }
    .pn-marketing-circle-mini-grid article { padding: 6px; border-radius: 13px; grid-template-columns: 25px minmax(0,1fr); gap: 6px; }
    .pn-circle-mini-emoji { width: 25px; height: 25px; border-radius: 9px; font-size: 13px; }
    .pn-marketing-circle-mini-grid strong { font-size: 6.5px; }
    .pn-marketing-circle-mini-grid small { font-size: 5.7px; }
    .pn-circle-chat-peek { margin-top: 6px; padding: 6px 7px; border-radius: 12px; grid-template-columns: 25px minmax(0,1fr) auto; gap: 6px; }
    .pn-chat-peek-avatar { width: 25px; height: 25px; border-radius: 9px; font-size: 6px; }
    .pn-circle-chat-peek strong { font-size: 6.5px; }
    .pn-circle-chat-peek small,
    .pn-chat-peek-reactions { font-size: 5.7px; }

    .pn-circle-reach-map { height: 145px; border-radius: 16px; }
    .pn-reach-ring.ring-a { width: 86px; height: 86px; }
    .pn-reach-ring.ring-b { width: 140px; height: 140px; }
    .pn-reach-pin { width: 36px; height: 36px; border-width: 3px; border-radius: 12px 12px 12px 4px; }
    .pn-reach-pin .pn-icon-svg { width: 16px; height: 16px; }
    .pn-reach-person { width: 23px; height: 23px; border-width: 2px; font-size: 5.5px; }
    .pn-reach-radius-label { bottom: 7px; padding: 4px 6px; font-size: 5.5px; }
    .pn-circle-reach-controls { margin-top: 6px; gap: 5px; }
    .pn-circle-reach-controls > div { gap: 5px; }
    .pn-reach-choice { padding: 6px; border-radius: 11px; grid-template-columns: 20px minmax(0,1fr); column-gap: 5px; }
    .pn-reach-choice i { width: 20px; height: 20px; border-radius: 7px; }
    .pn-reach-choice .pn-icon-svg { width: 11px; height: 11px; }
    .pn-reach-choice b { font-size: 6.3px; }
    .pn-reach-choice small { font-size: 5.4px; }
    .pn-circle-member-pass { margin-top: 5px; padding: 6px 7px; border-radius: 11px; grid-template-columns: 23px minmax(0,1fr); gap: 6px; }
    .pn-circle-member-pass > i { width: 23px; height: 23px; border-radius: 8px; }
    .pn-circle-member-pass .pn-icon-svg { width: 12px; height: 12px; }
    .pn-circle-member-pass strong { font-size: 6.3px; }
    .pn-circle-member-pass small { font-size: 5.5px; }
}

@media (max-width: 760px) and (max-height: 720px) {
    .pn-circle-feature-list,
    .pn-circle-access-points { display: none; }
    .pn-circle-landing-copy > p { font-size: 10px; }
    .pn-circle-landing-copy h2 { font-size: clamp(27px, 8vw, 34px); }
    .pn-circle-topic-strip { display: none; }
    .pn-circle-chat-peek { display: none; }
    .pn-circle-reach-map { height: 132px; }
}

/* v2.15.35 — Growth controls, signup coupons and Boost Mode */
.pn-inline-input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    margin-top: 7px;
}
.pn-inline-input-action .pn-btn { min-width: 86px; }
.pn-signup-coupon-field { margin-top: 2px; }
.pn-signup-coupon-field .pn-form-message { margin-top: 7px; }

.pn-boost-map-control { position: relative; }
.pn-boost-map-control.is-active {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--pn-mode-accent, #7462f5) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.42);
}
.pn-boost-control-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    right: 7px;
    top: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pn-mode-accent, #7462f5) 65%, transparent);
}
.pn-boost-sheet { max-width: 520px; }
.pn-boost-symbol {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border-radius: 19px;
    margin-bottom: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--pn-mode-accent, #7462f5), var(--pn-mode-accent-strong, #5a47e6));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--pn-mode-accent, #7462f5) 28%, transparent);
}
.pn-boost-symbol svg { width: 28px; height: 28px; }
.pn-boost-active-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    margin: 16px 0;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--pn-mode-accent, #7462f5) 32%, #fff);
    background: color-mix(in srgb, var(--pn-mode-accent, #7462f5) 10%, #fff);
}
.pn-boost-active-card[hidden] { display: none !important; }
.pn-boost-active-card strong { color: var(--pn-mode-accent-strong, #5a47e6); }
.pn-boost-active-card span { color: var(--pn-muted, #6d7280); font-size: .9rem; }
.pn-boost-options { display: grid; gap: 10px; margin: 16px 0; }
.pn-boost-option {
    width: 100%;
    border: 1px solid rgba(20,24,40,.10);
    border-radius: 20px;
    background: #fff;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pn-boost-option:hover,
.pn-boost-option:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--pn-mode-accent, #7462f5) 45%, transparent);
    box-shadow: 0 12px 30px rgba(20,24,40,.09);
}
.pn-boost-option:disabled { opacity: .62; cursor: wait; transform: none; }
.pn-boost-option span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pn-boost-option strong { color: var(--pn-text, #171922); }
.pn-boost-option small { color: var(--pn-muted, #6d7280); line-height: 1.4; }
.pn-boost-option b {
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--pn-mode-accent, #7462f5), var(--pn-mode-accent-strong, #5a47e6));
    font-size: .84rem;
    white-space: nowrap;
}
.pn-boost-wallet { margin-top: 8px; color: var(--pn-muted, #6d7280); font-size: .92rem; }
.pn-boost-wallet strong { color: var(--pn-text, #171922); }
.pn-promo-access-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin: 14px 0 20px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--pn-mode-accent, #7462f5) 25%, #e7e8ee);
    background: linear-gradient(135deg, color-mix(in srgb, var(--pn-mode-accent, #7462f5) 10%, #fff), #fff);
}
.pn-promo-access-card > svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--pn-mode-accent, #7462f5); }
.pn-promo-access-card span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pn-promo-access-card small { color: var(--pn-muted, #6d7280); line-height: 1.45; }

@media (max-width: 560px) {
    .pn-inline-input-action { grid-template-columns: 1fr; }
    .pn-inline-input-action .pn-btn { width: 100%; }
    .pn-boost-option { align-items: flex-start; }
    .pn-boost-option b { margin-top: 1px; }
}


/* v2.15.38 — performant live discovery-radius map pulse */
#pn-app .pn-scan-radius-readout {
    position: absolute;
    z-index: 820;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(245px, calc(100% - 36px));
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 16px;
    background: color-mix(in srgb, var(--pn-shell-b, #5a47e6) 82%, transparent);
    color: #fff;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--pn-shell-b, #5a47e6) 24%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    pointer-events: none;
    transition: background .28s ease, box-shadow .28s ease, opacity .2s ease;
}
#pn-app .pn-scan-radius-readout[hidden] { display: none !important; }
#pn-app .pn-scan-radius-readout > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#pn-app .pn-scan-radius-readout strong {
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#pn-app .pn-scan-radius-readout small {
    overflow: hidden;
    color: rgba(255,255,255,.70);
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#pn-app .pn-scan-radius-readout-pulse {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,255,255,.32);
    animation: pnScanReadoutPulse 2.2s ease-out infinite;
}
#pn-app .pn-scan-radius-readout.is-boosted {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pn-shell-a, #7462f5) 88%, transparent),
        color-mix(in srgb, var(--pn-shell-b, #5a47e6) 92%, transparent));
    box-shadow: 0 14px 34px var(--pn-shell-glow, rgba(116,98,245,.34));
}
#pn-app .pn-scan-radius-readout.is-boosted .pn-scan-radius-readout-pulse {
    animation-duration: 1.45s;
    box-shadow: 0 0 0 0 rgba(255,255,255,.46);
}
#pn-app .pn-scan-radius-readout.is-wider { opacity: .92; }

/*
 * The real radius is rendered by Leaflet Canvas in v2.15.38. Do not attach
 * SVG filters to it: at close zoom a 1 km circle can span several thousand
 * CSS pixels and force expensive full-frame filter repaints.
 */
#pn-map-container .pn-scan-radius-base { pointer-events: none; }

/* Geographic pulse is SVG only while its edge is actually useful on screen. */
#pn-map-container .pn-scan-radius-pulse {
    pointer-events: none;
    animation: pnScanRadiusPulse 2.7s ease-in-out infinite;
    will-change: opacity;
}
#pn-map-container .pn-scan-radius-pulse.is-boosted {
    animation-duration: 1.8s;
}

/* The marker-centred radar remains tiny and cheap at every zoom level. */
#pn-map-container .pn-scan-radius-radar {
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: pnScanRadarWave 2.25s cubic-bezier(.16,.68,.31,1) infinite;
    will-change: transform, opacity;
}
#pn-map-container .pn-scan-radius-radar.is-boosted { animation-duration: 1.45s; }

/* Freeze animation while Leaflet is actively translating/scaling the map. */
#pn-map-container.pn-map-interacting .pn-scan-radius-pulse,
#pn-map-container.pn-map-interacting .pn-scan-radius-radar {
    animation-play-state: paused !important;
}

@keyframes pnScanRadiusPulse {
    0%, 100% { opacity: .34; }
    50% { opacity: .78; }
}
@keyframes pnScanRadarWave {
    0% { opacity: .82; transform: scale(.78); }
    72% { opacity: .14; }
    100% { opacity: 0; transform: scale(3.25); }
}
@keyframes pnScanReadoutPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,.38); }
    68% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@media (max-width: 560px) {
    #pn-app .pn-scan-radius-readout {
        top: 12px;
        left: 12px;
        max-width: 188px;
        padding: 8px 10px;
        border-radius: 14px;
    }
    #pn-app .pn-scan-radius-readout strong { font-size: 10px; }
    #pn-app .pn-scan-radius-readout small { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    #pn-map-container .pn-scan-radius-pulse,
    #pn-map-container .pn-scan-radius-pulse.is-boosted,
    #pn-map-container .pn-scan-radius-radar,
    #pn-map-container .pn-scan-radius-radar.is-boosted,
    #pn-app .pn-scan-radius-readout-pulse {
        animation: none !important;
    }
}


/* === 2.15.39 mobile public-profile scroll parity ===================== */
@media (max-width: 860px) {
    #pn-public-profile-modal.pn-mobile-public-profile-modal .pn-profile-sheet,
    #pn-public-profile-modal.pn-mobile-public-profile-modal #pn-public-profile-content,
    .pn-mobile-profile-screen {
        min-height: 0 !important;
    }

    #pn-public-profile-modal.pn-mobile-public-profile-modal #pn-public-profile-content,
    .pn-mobile-profile-screen {
        overflow: hidden !important;
    }

    .pn-mobile-profile-scroll {
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        background: #fff;
        scrollbar-gutter: stable;
    }

    .pn-mobile-profile-hero {
        width: 100%;
        height: clamp(420px, 68dvh, 620px);
        min-height: clamp(420px, 68dvh, 620px) !important;
        flex: 0 0 auto !important;
    }

    .pn-mobile-profile-screen.is-self-preview .pn-mobile-profile-nudge-sheet {
        margin-top: 0;
        border-radius: 0;
        box-shadow: none;
        padding-bottom: 22px;
    }

    .pn-mobile-profile-screen.has-profile-action > .pn-mobile-profile-nudge-sheet {
        z-index: 8;
        flex: 0 0 auto;
        max-height: min(42dvh, 330px);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        box-shadow: 0 -12px 34px rgba(13,14,18,.10);
    }

    .pn-mobile-profile-details {
        min-width: 0;
        padding: 6px 18px calc(34px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        color: var(--pn-ink);
        text-align: left;
    }

    .pn-mobile-profile-details .pn-public-profile-intro {
        max-width: none;
        margin: 18px 2px;
        text-align: left;
        font-size: 12px;
    }

    .pn-mobile-profile-details .pn-public-intention {
        margin: 10px 0 0;
    }

    .pn-mobile-profile-details .pn-public-business {
        margin: 14px 0 0;
        text-align: left;
    }

    .pn-mobile-profile-details .pn-public-business small {
        justify-content: flex-start;
    }

    .pn-mobile-profile-details .pn-public-qualities,
    .pn-mobile-profile-details .pn-public-goals,
    .pn-mobile-profile-details .pn-tags {
        justify-content: flex-start;
    }

    .pn-mobile-profile-details .pn-public-section {
        margin-top: 20px;
        padding-top: 18px;
    }

    .pn-mobile-profile-details .pn-public-section h3 {
        font-size: 15px;
    }

    .pn-mobile-profile-details .pn-public-detail,
    .pn-mobile-profile-details .pn-public-favourite,
    .pn-mobile-profile-details .pn-public-prompt {
        border-radius: 17px;
    }

    .pn-mobile-profile-safety {
        margin-top: 22px;
    }
}

@media (max-width: 390px), (max-height: 650px) and (max-width: 860px) {
    .pn-mobile-profile-hero {
        height: clamp(390px, 64dvh, 520px);
        min-height: clamp(390px, 64dvh, 520px) !important;
    }
}

@media (max-width: 860px) {
    #pn-public-profile-modal.pn-mobile-public-profile-modal .pn-mobile-profile-back {
        position: fixed;
    }
}


/* ========================================================================== 
   Nudjee 2.15.40 — friendship-first landing page positioning
   ========================================================================== */

/* The public landing page now leads with Platonic / friendship. Romance keeps
   its own semantic colour, but it is intentionally no longer the brand-level
   visual signal on first load. */
.pn-landing {
    --pn-platonic: #6676ff;
    --pn-platonic-deep: #4559db;
    --pn-platonic-soft: rgba(102, 118, 255, .16);
    --pn-romance: #f06a91;
    background:
        radial-gradient(circle at 10% 4%, rgba(91, 112, 255, .24), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(51, 194, 179, .14), transparent 31%),
        radial-gradient(circle at 48% 74%, rgba(118, 97, 255, .13), transparent 36%),
        linear-gradient(148deg, #10172a 0%, #0e1422 50%, #0a121c 100%);
}

.pn-landing .pn-guest-glow-one {
    background: rgba(94, 116, 255, .22);
}

.pn-landing .pn-guest-glow-two {
    background: rgba(91, 82, 230, .15);
}

.pn-landing .pn-brand-mark {
    background: var(--pn-brand-gradient);
    box-shadow: 0 14px 38px rgba(63, 155, 193, .27);
}

.pn-landing .pn-brand-mark-small {
    box-shadow: 0 8px 22px rgba(63, 155, 193, .22);
}

.pn-landing .pn-eyebrow {
    color: #9aa8ff;
}

.pn-landing .pn-btn-primary {
    background: linear-gradient(145deg, #7183ff, #4e61df);
    box-shadow: 0 11px 25px rgba(78, 97, 223, .24);
}

.pn-landing .pn-btn-primary:hover {
    box-shadow: 0 14px 30px rgba(78, 97, 223, .31);
}

.pn-landing-proof .pn-icon-svg {
    color: #91a0ff;
}

/* Ambient landing nodes now read as friendship/community first. */
.pn-landing .pn-network-orb.orb-one {
    background: radial-gradient(circle at 32% 30%, #f1f4ff 0 6%, rgba(255,255,255,.18) 8%, rgba(255,255,255,0) 24%), linear-gradient(145deg, rgba(103,122,255,.94), rgba(144,157,255,.56));
}

.pn-landing .pn-network-orb.orb-two {
    background: radial-gradient(circle at 32% 30%, #f4f0ff 0 7%, rgba(255,255,255,.16) 9%, rgba(255,255,255,0) 24%), linear-gradient(145deg, rgba(124,92,255,.9), rgba(95,156,255,.5));
}

.pn-landing .pn-network-orb.orb-four {
    background: radial-gradient(circle at 32% 30%, #f0f8ff 0 7%, rgba(255,255,255,.16) 9%, rgba(255,255,255,0) 24%), linear-gradient(145deg, rgba(94,147,255,.9), rgba(77,201,184,.45));
}

/* Friend mode is the selected product in the hero device preview. */
.pn-landing .pn-device-mode .is-active {
    color: white;
    background: linear-gradient(135deg, #7183ff, #4f60da);
    box-shadow: 0 8px 16px rgba(79,96,218,.22);
}

.pn-landing .pn-device-radar {
    background:
        linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)),
        repeating-linear-gradient(0deg, transparent 0 32px, rgba(68,83,140,.07) 33px),
        repeating-linear-gradient(90deg, transparent 0 32px, rgba(68,83,140,.07) 33px),
        linear-gradient(140deg, #e1e7f2, #d4deea);
}

.pn-landing .pn-radar-ring {
    border-color: rgba(92, 111, 235, .24);
}

.pn-landing .pn-device-radar::before,
.pn-landing .pn-device-radar::after {
    background:
        radial-gradient(circle, rgba(255,255,255,.95) 0 1.2px, transparent 1.7px) left center / 12px 100% repeat-x,
        linear-gradient(90deg, rgba(91,111,235,.1), rgba(91,111,235,.32), rgba(91,111,235,.1));
}

.pn-landing .pn-radar-you {
    background: linear-gradient(145deg, #7183ff, #5365df);
}

.pn-landing .pn-radar-person.p1 {
    background: linear-gradient(145deg, #31bfaf, #16847d);
}

.pn-landing .pn-radar-person.p2 {
    background: linear-gradient(145deg, #8d7eff, #6657d6);
}

.pn-landing .pn-device-avatar {
    background: linear-gradient(145deg, #7b8bff, #5365dd);
}

.pn-landing .pn-device-card button {
    background: linear-gradient(135deg, #6d7fff, #4d60dc);
}

.pn-landing .pn-device-note .pn-icon-svg {
    color: #5f71e8;
}

/* Friendship is visibly the hero product; Business and Romance are supporting
   offerings with equal but quieter card treatment. */
.pn-mode-showcase {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .92fr) minmax(0, .92fr);
}

.pn-mode-story.is-platonic {
    color: #8f9cff;
}

.pn-mode-story.is-platonic.is-primary {
    border-color: rgba(130, 145, 255, .34);
    background:
        radial-gradient(circle at 85% 15%, rgba(104,122,255,.18), transparent 34%),
        linear-gradient(155deg, rgba(99,116,255,.12), rgba(255,255,255,.045));
    box-shadow: 0 24px 65px rgba(63, 80, 185, .12);
}

.pn-mode-story.is-platonic.is-primary .pn-mode-icon {
    background: rgba(105, 121, 255, .13);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.pn-mode-story.is-business { color: #55d2c4; }
.pn-mode-story.is-romance { color: #ef7597; }

/* Privacy visual now reinforces location/control instead of presenting a
   gender-pair diagram as a primary landing-page motif. */
.pn-audience-privacy-visual > div {
    grid-template-columns: auto 1fr;
}

.pn-audience-privacy-visual > div > span {
    background: linear-gradient(145deg, #7284ff, #5365dc);
}

.pn-audience-privacy-visual > div:nth-child(2) > span {
    background: linear-gradient(145deg, #37c5b5, #16877f);
}

.pn-audience-privacy-visual > div:nth-child(3) > span {
    background: linear-gradient(145deg, #8b7bff, #6758d8);
}

.pn-audience-privacy-visual > div > strong {
    margin-left: 8px;
    color: rgba(255,255,255,.84);
}

.pn-audience-privacy-visual .pn-icon-svg {
    width: 20px;
    height: 20px;
}

/* Subscription emphasis follows the friendship palette instead of romance. */
.pn-landing-plan.is-featured {
    border-color: rgba(116, 132, 255, .42);
    background: linear-gradient(160deg, rgba(94,113,255,.14), rgba(255,255,255,.045));
    box-shadow: 0 22px 55px rgba(74, 91, 207, .12);
}

.pn-landing .pn-plan-popular {
    background: linear-gradient(135deg, #7183ff, #4e61df);
}

.pn-landing-final,
.pn-final-cta {
    background:
        radial-gradient(circle at 80% 15%, rgba(41,183,168,.18), transparent 35%),
        radial-gradient(circle at 15% 90%, rgba(102,118,255,.25), transparent 40%),
        rgba(255,255,255,.04);
}

@media (max-width: 900px) {
    .pn-mode-showcase {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   2.15.41 — Smart Circle Radar
   ========================================================== */
.pn-smart-radar-landing {
    position: relative;
    overflow: hidden;
}
.pn-smart-radar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
    width: min(1180px, 100%);
    margin: 0 auto;
}
.pn-smart-radar-copy h2 {
    max-width: 760px;
}
.pn-smart-radar-copy > p {
    max-width: 720px;
}
.pn-smart-radar-points {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}
.pn-smart-radar-points > span {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(75, 104, 220, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}
.pn-smart-radar-points svg {
    grid-row: 1 / 3;
    width: 23px;
    height: 23px;
    color: #536bd6;
}
.pn-smart-radar-points strong { color: #172043; }
.pn-smart-radar-points small { color: #69708b; margin-top: 2px; }
.pn-smart-radar-safety {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 15px;
    color: #667085;
    max-width: 650px;
}
.pn-smart-radar-safety svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: #536bd6; }
.pn-smart-radar-visual {
    position: relative;
    min-height: 450px;
    border: 1px solid rgba(73, 97, 206, .17);
    border-radius: 32px;
    background:
        radial-gradient(circle at 72% 18%, rgba(77, 200, 190, .18), transparent 31%),
        radial-gradient(circle at 18% 76%, rgba(103, 120, 232, .2), transparent 35%),
        #f8faff;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(42, 57, 124, .13);
}
.pn-smart-route-map {
    position: absolute;
    inset: 22px 22px 100px;
    border-radius: 24px;
    background:
        linear-gradient(28deg, transparent 46%, rgba(91, 109, 189, .08) 47%, rgba(91, 109, 189, .08) 49%, transparent 50%) 0 0 / 88px 88px,
        linear-gradient(115deg, transparent 46%, rgba(91, 109, 189, .07) 47%, rgba(91, 109, 189, .07) 49%, transparent 50%) 0 0 / 112px 112px,
        rgba(255,255,255,.76);
    border: 1px solid rgba(75,104,220,.12);
}
.pn-smart-route-line {
    position: absolute;
    left: 13%;
    right: 13%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #667bea, #4abdad);
    transform-origin: left center;
}
.pn-smart-route-line.line-one { top: 61%; transform: rotate(-17deg); }
.pn-smart-route-line.line-two { top: 37%; left: 47%; right: 9%; transform: rotate(20deg); }
.pn-smart-route-start,.pn-smart-route-end {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: #fff;
    border: 2px solid #6075df;
    color: #465abc;
    box-shadow: 0 8px 24px rgba(59, 78, 160, .14);
}
.pn-smart-route-start { left: 8%; bottom: 20%; }
.pn-smart-route-end { right: 7%; top: 23%; }
.pn-smart-route-you {
    position: absolute;
    left: 48%;
    top: 49%;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #5f73df;
    box-shadow: 0 0 0 10px rgba(95,115,223,.13), 0 12px 30px rgba(54,74,163,.22);
}
.pn-smart-route-you svg { width: 22px; height: 22px; }
.pn-smart-route-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(75,104,220,.14);
    box-shadow: 0 12px 26px rgba(51, 66, 137, .12);
    font-size: 18px;
}
.pn-smart-route-pin small { font-size: 11px; font-weight: 750; color: #46506d; }
.pn-smart-route-pin.pin-running { left: 19%; top: 24%; }
.pn-smart-route-pin.pin-photo { right: 13%; bottom: 19%; }
.pn-smart-route-pin.pin-coffee { right: 15%; top: 10%; }
.pn-smart-notification-demo {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 28px;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(19, 27, 57, .94);
    color: #fff;
    box-shadow: 0 18px 45px rgba(25, 34, 75, .2);
}
.pn-smart-notification-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255,255,255,.12);
    font-size: 23px;
}
.pn-smart-notification-demo span:last-child { display: grid; gap: 2px; }
.pn-smart-notification-demo small { font-size: 9px; letter-spacing: .11em; color: #aeb9ff; font-weight: 800; }
.pn-smart-notification-demo strong { font-size: 13px; }
.pn-smart-notification-demo em { font-size: 11px; color: #cdd3e8; font-style: normal; }
.pn-smart-match-chip {
    position: absolute;
    right: 19px;
    top: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(75,104,220,.12);
    box-shadow: 0 9px 24px rgba(50,65,133,.1);
}
.pn-smart-match-chip i { width: 9px; height: 9px; border-radius: 50%; background: #38b99f; box-shadow: 0 0 0 5px rgba(56,185,159,.11); }
.pn-smart-match-chip span { display: grid; }
.pn-smart-match-chip strong { font-size: 11px; color: #25315d; }
.pn-smart-match-chip small { font-size: 9px; color: #78809a; }

.pn-circle-smart-discovery {
    border: 1px solid rgba(79, 103, 214, .14);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(246, 248, 255, .82);
}
.pn-circle-smart-discovery .pn-setting-row { border: 0; background: transparent; }
.pn-circle-smart-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 15px 15px;
}
.pn-circle-smart-options[hidden] { display: none !important; }
.pn-circle-smart-note {
    grid-column: 1 / -1;
    color: #68708c;
    line-height: 1.45;
}
.pn-circle-local-access [hidden] { display: none !important; }
.pn-notification-row.is-smart-circle .pn-notification-avatar {
    background-image: linear-gradient(145deg, rgba(89,109,222,.15), rgba(66,188,172,.18)) !important;
}
.pn-notification-row.is-smart-circle .pn-notification-type {
    color: #536bd6;
    background: #eef1ff;
}

@media (max-width: 820px) {
    .pn-smart-radar-grid { grid-template-columns: 1fr; gap: 28px; }
    .pn-smart-radar-visual { min-height: 390px; }
    .pn-circle-smart-options { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .pn-smart-radar-visual { min-height: 355px; border-radius: 24px; }
    .pn-smart-route-map { inset: 14px 14px 102px; }
    .pn-smart-route-pin small { display: none; }
    .pn-smart-notification-demo { left: 16px; right: 16px; bottom: 16px; padding: 12px; }
    .pn-smart-notification-demo em { white-space: normal; }
    .pn-smart-match-chip { right: 10px; top: 10px; }
}
.pn-circle-smart-mark {
    position: absolute;
    left: 9px;
    bottom: 9px;
    z-index: 4;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: rgba(28, 38, 78, .82);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 14px rgba(18,24,52,.2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.pn-circle-smart-mark svg { width: 14px; height: 14px; }


/* v2.15.85 — Circle card overlay + hero permission hardening. */
#pn-circle-hero-edit[hidden],
#pn-circle-change-hero-action[hidden] {
    display: none !important;
}
.pn-circle-photo-cover.has-hero .pn-circle-smart-mark {
    opacity: .96;
}
.pn-circle-photo-cover:has(.pn-circle-photo-credit) .pn-circle-smart-mark {
    left: auto;
    right: 9px;
    bottom: 9px;
}

/* v2.15.42 — timed Ghost Mode entitlement */
#pn-visibility-toggle { position: relative; }
.pn-ghost-allowance-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    background: #fff;
    color: #20232d;
    border: 1px solid rgba(32,35,45,.14);
    box-shadow: 0 3px 8px rgba(20,24,34,.14);
    pointer-events: none;
}
#pn-visibility-toggle.is-active .pn-ghost-allowance-badge {
    background: #20232d;
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.pn-ghost-membership-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 16px;
    align-items: start;
    padding: 20px;
    margin: 14px 0 22px;
    border: 1px solid var(--pn-line);
    border-radius: 22px;
    background: var(--pn-surface-soft, #f7f7fa);
}
.pn-ghost-membership-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #22232a;
    color: #fff;
}
.pn-ghost-membership-icon svg { width: 22px; height: 22px; }
.pn-ghost-membership-card h3 { margin: 3px 0 5px; }
.pn-ghost-membership-card strong { display: block; margin-bottom: 4px; }
.pn-ghost-membership-card p { margin: 0; color: var(--pn-muted); }
@media (max-width: 560px) {
    .pn-ghost-membership-card { padding: 16px; border-radius: 18px; gap: 12px; }
    .pn-ghost-membership-icon { width: 40px; height: 40px; border-radius: 13px; }
}
.pn-audience-privacy-visual > div:nth-child(4) > span {
    background: linear-gradient(145deg, #3d465d, #202534);
}


/* === 2.15.43 — compact tabbed Membership & Wallet ====================== */
.pn-hub-subtitle {
    display: block;
    margin-top: 3px;
    color: var(--pn-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .01em;
}
.pn-hub-subtitle[hidden] { display: none !important; }
#pn-view-subscription { padding-top: 18px; }
#pn-view-subscription .pn-membership-intro-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
    gap: 16px;
    align-items: end;
    padding-bottom: 14px;
}
#pn-view-subscription .pn-membership-intro-compact h2 { font-size: clamp(23px, 3vw, 31px); margin-bottom: 8px; }
.pn-current-membership-chip {
    padding: 14px 16px;
    border: 1px solid rgba(78, 104, 220, .14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(237,242,255,.88), rgba(255,255,255,.96));
    display: grid;
    gap: 3px;
}
.pn-current-membership-chip small { color: #6670a1; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.pn-current-membership-chip strong { color: var(--pn-ink); font-size: 17px; }
.pn-current-membership-chip span { color: var(--pn-muted); font-size: 9px; line-height: 1.4; }
.pn-membership-tabs {
    position: sticky;
    top: 0;
    z-index: 7;
    margin: 0 0 16px;
    padding: 5px;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}
.pn-membership-tabs button {
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    color: var(--pn-muted);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    transition: .16s ease;
}
.pn-membership-tabs button:hover { background: rgba(76,102,214,.06); color: var(--pn-ink); }
.pn-membership-tabs button.is-active { color: #fff; background: linear-gradient(135deg, #5468dc, #6f59c8); box-shadow: 0 6px 18px rgba(80,93,196,.2); }
.pn-membership-tabs button span:empty { display: none; }
.pn-membership-tabs button span:not(:empty) { margin-left: 4px; padding: 1px 5px; border-radius: 99px; background: rgba(255,255,255,.22); font-size: 8px; }
.pn-membership-tab-panel[hidden] { display: none !important; }
.pn-membership-tab-panel.is-active { display: block; animation: pnMembershipPanelIn .16s ease both; }
@keyframes pnMembershipPanelIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.pn-membership-overview-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(220px,.65fr); gap: 14px; }
#pn-view-subscription .pn-membership-overview-grid .pn-wallet-card { margin: 0; }
.pn-membership-quick-card {
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(76,102,214,.13);
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    cursor: pointer;
}
.pn-membership-quick-card > span { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px; color: #6759c8; background: rgba(103,89,200,.09); display: grid; place-items: center; }
.pn-membership-quick-card > span svg { width: 22px; height: 22px; }
.pn-membership-quick-card div { min-width: 0; display: grid; gap: 3px; }
.pn-membership-quick-card small { color: var(--pn-muted); font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.pn-membership-quick-card strong { color: var(--pn-ink); font-size: 16px; }
.pn-membership-quick-card p { margin: 0; color: var(--pn-muted); font-size: 9px; }
#pn-view-subscription .pn-wallet-card-compact { margin: 0 0 18px; }
#pn-view-subscription .pn-membership-tab-panel > .pn-section-heading { margin-top: 4px; }
#pn-view-subscription .pn-credit-pack-grid,
#pn-view-subscription .pn-wallet-transactions { margin-bottom: 18px; }
#pn-view-subscription .pn-membership-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-ghost-bank-summary { margin: 14px 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.pn-ghost-bank-summary article { padding: 14px; border: 1px solid var(--pn-line); border-radius: 16px; background: #fff; display: grid; gap: 3px; }
.pn-ghost-bank-summary small { color: var(--pn-muted); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.pn-ghost-bank-summary strong { color: #5e56bb; font-size: 25px; letter-spacing: -.04em; }
.pn-ghost-bank-summary span { color: var(--pn-muted); font-size: 8px; }
.pn-ghost-purchase-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.pn-ghost-purchase-card { padding: 16px; border: 1px solid var(--pn-line); border-radius: 18px; background: #fff; display: grid; gap: 5px; }
.pn-ghost-purchase-card > span { width: 36px; height: 36px; margin-bottom: 4px; border-radius: 12px; color: #6257c7; background: rgba(98,87,199,.09); display: grid; place-items: center; }
.pn-ghost-purchase-card > span svg { width: 18px; height: 18px; }
.pn-ghost-purchase-card small { color: var(--pn-muted); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.pn-ghost-purchase-card strong { color: var(--pn-ink); font-size: 18px; }
.pn-ghost-purchase-card p { margin: 0 0 7px; color: #6257c7; font-size: 12px; font-weight: 800; }
.pn-ghost-purchase-card .pn-btn { width: 100%; margin-top: auto; }
.pn-ghost-purchase-card .pn-btn.is-low-balance { border-color: rgba(211,47,91,.18); }
.pn-ghost-credit-helper { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--pn-line); border-radius: 14px; background: rgba(249,250,255,.8); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--pn-muted); font-size: 9px; }
.pn-ghost-credit-helper strong { color: var(--pn-ink); }
#pn-ghost-purchase-message { margin-top: 10px; }

@media (max-width: 760px) {
    #pn-view-subscription { padding: 13px 12px 22px; }
    #pn-view-subscription .pn-membership-intro-compact { grid-template-columns: 1fr; gap: 10px; }
    #pn-view-subscription .pn-membership-intro-compact h2 { font-size: 23px; }
    .pn-current-membership-chip { padding: 11px 13px; border-radius: 15px; }
    .pn-membership-tabs { grid-template-columns: repeat(5, max-content); overflow-x: auto; justify-content: start; scrollbar-width: none; }
    .pn-membership-tabs::-webkit-scrollbar { display: none; }
    .pn-membership-tabs button { min-width: 82px; }
    .pn-membership-overview-grid { grid-template-columns: 1fr; }
    #pn-view-subscription .pn-membership-grid,
    .pn-ghost-purchase-grid { grid-template-columns: 1fr; }
    .pn-ghost-bank-summary { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
    .pn-ghost-bank-summary article { padding: 11px 8px; }
    .pn-ghost-bank-summary strong { font-size: 21px; }
    .pn-ghost-credit-helper { align-items: flex-start; }
}


/* v2.15.45 — Guided Discovery hero story.
 * The first landing slide uses a slower, richer product narrative instead of a
 * static Discover Mode card. Animations stay on opacity/transform/SVG stroke
 * properties so the decorative homepage preview remains GPU-friendly. */
.pn-guided-device {
    --pn-guided-cycle: 28s;
    min-height: 548px;
    padding: 14px 14px 12px;
    transform: rotate(1.25deg);
    background: linear-gradient(155deg, rgba(255,255,255,.17), rgba(255,255,255,.045));
}

.pn-guided-device::before {
    background:
        radial-gradient(circle at 85% 8%, rgba(85,107,255,.11), transparent 29%),
        linear-gradient(180deg, #fbfcff 0%, #f1f4f9 100%);
}

.pn-guided-topbar {
    position: relative;
    z-index: 8;
    height: 54px;
    padding: 5px 7px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #171b2b;
}

.pn-guided-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pn-guided-brand > span:last-child {
    display: grid;
    gap: 1px;
}

.pn-guided-brand strong { font-size: 11px; line-height: 1; }
.pn-guided-brand small { color: #858b9b; font-size: 7px; font-weight: 800; letter-spacing: .035em; }

.pn-guided-live {
    padding: 6px 8px;
    border: 1px solid #dfe6f5;
    border-radius: 999px;
    color: #516074;
    background: rgba(255,255,255,.84);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .03em;
}

.pn-guided-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #17a99d;
    box-shadow: 0 0 0 4px rgba(23,169,157,.10);
}

.pn-guided-screen {
    position: relative;
    height: 409px;
    margin: 0 1px;
    overflow: hidden;
    border: 1px solid #e4e9f2;
    border-radius: 25px;
    background: #f8fafc;
    color: #1b2030;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.pn-guided-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.pn-guided-interests {
    padding: 38px 27px 25px;
    transform: translateX(0);
    animation: pnGuidedInterests var(--pn-guided-cycle) cubic-bezier(.2,.75,.2,1) infinite;
}

.pn-guided-kicker,
.pn-guided-circle-body > small,
.pn-guided-final > small {
    color: #6372ef;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .16em;
}

.pn-guided-interests h3 {
    margin: 7px 0 6px;
    color: #171b29;
    font-size: 25px;
    letter-spacing: -.04em;
}

.pn-guided-interests > p {
    max-width: 290px;
    margin: 0;
    color: #70778a;
    font-size: 9px;
    line-height: 1.55;
}

.pn-guided-chips {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pn-guided-chip {
    padding: 10px 12px;
    border: 1px solid #dfe4ed;
    border-radius: 999px;
    color: #626a7b;
    background: white;
    font-size: 9px;
    font-weight: 850;
    opacity: 0;
    transform: translateY(9px) scale(.94);
    animation: pnGuidedChip var(--pn-guided-cycle) cubic-bezier(.2,.8,.2,1) infinite;
    animation-delay: calc(var(--chip-index) * .18s);
}

.pn-guided-chip.is-selected {
    border-color: rgba(91,103,239,.25);
    color: #4853d5;
    background: #eef0ff;
}

.pn-guided-learning {
    position: absolute;
    left: 27px;
    right: 27px;
    bottom: 28px;
    padding: 11px;
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    opacity: 0;
    transform: translateY(12px);
    animation: pnGuidedLearning var(--pn-guided-cycle) ease infinite;
}

.pn-guided-learning > span {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    color: white;
    background: linear-gradient(135deg, #5969f0, #6876ff);
    display: grid;
    place-items: center;
}
.pn-guided-learning > span .pn-icon-svg { width: 16px; height: 16px; }
.pn-guided-learning > div { display: grid; gap: 2px; }
.pn-guided-learning strong { font-size: 8px; }
.pn-guided-learning small { color: #8b91a0; font-size: 7px; }
.pn-guided-learning > b { color: #16a58f; }
.pn-guided-learning > b .pn-icon-svg { width: 17px; height: 17px; }

.pn-guided-map-scene {
    background: linear-gradient(145deg, #eef5f5, #e7ebf6);
    transform: translateX(22%);
    animation: pnGuidedMapScene var(--pn-guided-cycle) cubic-bezier(.2,.78,.2,1) infinite;
}

.pn-guided-map-grid {
    position: absolute;
    inset: 0;
    opacity: .58;
    background:
        linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)),
        repeating-linear-gradient(0deg, transparent 0 36px, rgba(61,91,109,.08) 37px),
        repeating-linear-gradient(90deg, transparent 0 36px, rgba(61,91,109,.08) 37px);
}
.pn-guided-map-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.pn-guided-map-aurora i {
    position: absolute;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    opacity: .28;
    background: radial-gradient(circle, rgba(91,103,239,.42), transparent 67%);
    transform: translate3d(0,0,0) scale(.8);
    animation: pnGuidedMapAurora var(--pn-guided-cycle) ease-in-out infinite;
}
.pn-guided-map-aurora i:nth-child(1) { left: -42px; top: 34px; }
.pn-guided-map-aurora i:nth-child(2) { right: -50px; top: 118px; background: radial-gradient(circle, rgba(23,169,157,.38), transparent 67%); animation-delay: .6s; }
.pn-guided-map-aurora i:nth-child(3) { right: 65px; bottom: -56px; background: radial-gradient(circle, rgba(141,101,234,.28), transparent 67%); animation-delay: 1.1s; }

.pn-guided-route {
    position: absolute;
    inset: 18px 18px 55px 18px;
    width: calc(100% - 36px);
    height: calc(100% - 73px);
    overflow: visible;
}

.pn-guided-route-aura,
.pn-guided-route-shadow,
.pn-guided-route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pn-guided-route-aura {
    stroke: rgba(91,103,239,.16);
    stroke-width: 22;
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    animation: pnGuidedRouteAura var(--pn-guided-cycle) cubic-bezier(.3,.7,.2,1) infinite;
}
.pn-guided-route-shadow { stroke: rgba(255,255,255,.9); stroke-width: 12; }
.pn-guided-route-line {
    stroke: url(#pn-guided-route-gradient);
    stroke-width: 5;
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    animation: pnGuidedRoute var(--pn-guided-cycle) cubic-bezier(.3,.7,.2,1) infinite;
}

.pn-guided-origin {
    position: absolute;
    left: 35px;
    bottom: 45px;
    width: 41px;
    height: 41px;
    border: 4px solid white;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #6170f7, #4653d9);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(68,82,205,.25);
}
.pn-guided-origin > b { z-index: 2; display: grid; place-items: center; }
.pn-guided-origin .pn-icon-svg { width: 16px; height: 16px; }
.pn-guided-pulse {
    position: absolute;
    inset: 50%;
    width: 56px;
    height: 56px;
    margin: -28px;
    border: 2px solid rgba(87,102,233,.42);
    border-radius: 50%;
    animation: pnGuidedPulse 2.15s cubic-bezier(.16,.72,.3,1) infinite;
}
.pn-guided-pulse.p2 { animation-delay: 1.05s; }

.pn-guided-route-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5a6273;
}
.pn-guided-route-label small {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: white;
    background: #1e2635;
    display: grid;
    place-items: center;
    font-size: 7px;
    font-weight: 950;
}
.pn-guided-route-label strong { font-size: 7px; }
.pn-guided-route-label.start { left: 80px; bottom: 51px; }
.pn-guided-route-label.end { right: 29px; top: 19px; }

.pn-guided-circle-pin {
    position: absolute;
    padding: 5px 7px 5px 5px;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 22px rgba(38,52,70,.13);
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transform: translateY(8px) scale(.84);
}
.pn-guided-circle-pin::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px;
    border: 1px solid rgba(91,103,239,.28);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.5);
    pointer-events: none;
}
.pn-guided-circle-pin.pin-hike::after { animation: pnGuidedPinHaloHike var(--pn-guided-cycle) ease-out infinite; }
.pn-guided-circle-pin.pin-coffee::after { animation: pnGuidedPinHaloCoffee var(--pn-guided-cycle) ease-out infinite; }
.pn-guided-circle-pin.pin-photo::after { animation: pnGuidedPinHaloPhoto var(--pn-guided-cycle) ease-out infinite; }
.pn-guided-circle-pin > span {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: #eef0ff;
    display: grid;
    place-items: center;
    font-size: 13px;
}
.pn-guided-circle-pin > div { display: grid; gap: 1px; }
.pn-guided-circle-pin strong { color: #333a4c; font-size: 7px; white-space: nowrap; }
.pn-guided-circle-pin small { color: #6975e8; font-size: 5.5px; font-weight: 900; letter-spacing: .06em; }
.pn-guided-circle-pin.pin-hike { left: 52px; top: 115px; animation: pnGuidedPinHike var(--pn-guided-cycle) cubic-bezier(.2,.85,.2,1) infinite; }
.pn-guided-circle-pin.pin-coffee { right: 22px; top: 183px; animation: pnGuidedPinCoffee var(--pn-guided-cycle) cubic-bezier(.2,.85,.2,1) infinite; }
.pn-guided-circle-pin.pin-photo { right: 40px; top: 73px; animation: pnGuidedPinPhoto var(--pn-guided-cycle) cubic-bezier(.2,.85,.2,1) infinite; }

.pn-guided-best-match {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 13px;
    padding: 11px 12px 9px;
    border: 1px solid rgba(91,103,239,.20);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 13px 30px rgba(41,53,83,.16);
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(.97);
    animation: pnGuidedBestMatch var(--pn-guided-cycle) cubic-bezier(.2,.85,.2,1) infinite;
}
.pn-guided-best-match::before {
    content: '';
    position: absolute;
    inset: -30% auto -30% -45%;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
    transform: skewX(-15deg) translateX(-250%);
    animation: pnGuidedMatchSheen var(--pn-guided-cycle) ease infinite;
    pointer-events: none;
}
.pn-guided-best-match > * { position: relative; z-index: 1; }
.pn-guided-best-match > small { color: #6370e7; font-size: 5.5px; font-weight: 950; letter-spacing: .11em; }
.pn-guided-best-match > div { margin-top: 7px; display: flex; align-items: center; gap: 8px; }
.pn-guided-match-icon { width: 35px; height: 35px; border-radius: 11px; background: #eef0ff; display: grid; place-items: center; font-size: 17px; }
.pn-guided-best-match > div > div { display: grid; gap: 2px; }
.pn-guided-best-match strong { font-size: 9px; }
.pn-guided-best-match span { color: #7c8394; font-size: 6.5px; }
.pn-guided-best-match footer { margin-top: 7px; padding-top: 6px; border-top: 1px solid #edf0f5; display: flex; justify-content: space-between; align-items: center; color: #7c8394; font-size: 6px; }
.pn-guided-best-match footer b { color: #5b67eb; }
.pn-guided-best-match footer .pn-icon-svg { width: 13px; height: 13px; }

.pn-guided-circle-scene {
    background: #f8fafc;
    transform: translateX(22%);
    animation: pnGuidedCircleScene var(--pn-guided-cycle) cubic-bezier(.2,.78,.2,1) infinite;
}
.pn-guided-circle-cover {
    position: relative;
    height: 104px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 25%, rgba(255,255,255,.24), transparent 25%),
        linear-gradient(135deg, #5565ed, #2f3a9f 64%, #17205c);
}
.pn-guided-circle-cover::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    left: -70px;
    top: -92px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63,219,202,.34), rgba(141,101,234,.12) 45%, transparent 68%);
    transform: translate3d(0,0,0) scale(.9);
    animation: pnGuidedCoverAurora var(--pn-guided-cycle) ease-in-out infinite;
}
.pn-guided-circle-cover::after {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    right: -28px;
    bottom: -102px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 23px rgba(255,255,255,.04), 0 0 0 46px rgba(255,255,255,.035);
}
.pn-guided-back { position: absolute; left: 13px; top: 11px; color: white; font-size: 22px; line-height: 1; }
.pn-guided-circle-badge { position: absolute; right: 12px; top: 12px; padding: 5px 7px; border-radius: 999px; color: white; background: rgba(15,22,70,.35); font-size: 5.5px; font-weight: 900; letter-spacing: .08em; }
.pn-guided-cover-emoji { position: absolute; left: 22px; bottom: 13px; font-size: 31px; }
.pn-guided-circle-body { padding: 15px 18px; }
.pn-guided-circle-body h3 { margin: 4px 0 6px; color: #171b29; font-size: 20px; letter-spacing: -.03em; }
.pn-guided-match-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pn-guided-match-row > * { font-size: 6.5px; }
.pn-guided-match-row b { color: #5360e4; }
.pn-guided-match-row span { color: #838a9a; }

.pn-guided-people {
    margin-top: 13px;
    padding: 9px 0;
    border-top: 1px solid #e8ebf1;
    border-bottom: 1px solid #e8ebf1;
    display: flex;
    align-items: center;
}
.pn-guided-person {
    width: 28px;
    height: 28px;
    margin-right: -6px;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #5c6af0, #26329e);
    display: grid;
    place-items: center;
    font-size: 7px;
    font-weight: 950;
    opacity: 0;
    transform: scale(.6);
    animation: pnGuidedPerson var(--pn-guided-cycle) cubic-bezier(.2,.9,.2,1) infinite;
    animation-delay: calc(var(--person-index) * .16s);
}
.pn-guided-person:nth-child(2) { background: linear-gradient(135deg, #13a99b, #08756e); }
.pn-guided-person:nth-child(3) { background: linear-gradient(135deg, #ed9e46, #bd6526); }
.pn-guided-person:nth-child(4) { background: linear-gradient(135deg, #8d65ea, #5e3cac); }
.pn-guided-people > div { margin-left: 14px; display: grid; gap: 2px; }
.pn-guided-people strong { font-size: 7.5px; }
.pn-guided-people small { color: #8a91a0; font-size: 6px; }

.pn-guided-activity {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    transform: translateX(-9px);
    animation: pnGuidedActivityOne var(--pn-guided-cycle) ease infinite;
}
.pn-guided-activity.second { animation-name: pnGuidedActivityTwo; }
.pn-guided-activity > span,
.pn-guided-chat > span {
    width: 25px;
    height: 25px;
    border-radius: 9px;
    color: white;
    background: #5665ea;
    display: grid;
    place-items: center;
    font-size: 7px;
    font-weight: 900;
}
.pn-guided-activity.second > span { background: #15998e; }
.pn-guided-activity > div { display: grid; gap: 1px; }
.pn-guided-activity strong { font-size: 7px; }
.pn-guided-activity small { color: #969ba8; font-size: 5.5px; }

.pn-guided-chat {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 46px;
    padding: 9px;
    border: 1px solid #dfe4ee;
    border-radius: 14px;
    background: white;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    opacity: 0;
    transform: translateY(11px);
    animation: pnGuidedChat var(--pn-guided-cycle) cubic-bezier(.2,.85,.2,1) infinite;
}
.pn-guided-chat > div { min-width: 0; }
.pn-guided-chat strong { display: block; font-size: 7px; }
.pn-guided-chat p { margin: 2px 0 0; color: #656d7e; font-size: 6.5px; line-height: 1.35; }
.pn-guided-join {
    position: absolute;
    right: 18px;
    bottom: 12px;
    min-height: 27px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    color: white;
    background: #5664e8;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 6.5px;
    font-weight: 900;
    opacity: 0;
    transform: scale(.94);
    animation: pnGuidedJoin var(--pn-guided-cycle) ease infinite;
}
.pn-guided-join .pn-icon-svg { width: 11px; height: 11px; }

.pn-guided-notification {
    position: absolute;
    z-index: 12;
    left: 14px;
    right: 14px;
    top: 12px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.84);
    border-radius: 17px;
    background: rgba(250,251,255,.97);
    box-shadow: 0 13px 32px rgba(28,35,62,.19);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    opacity: 0;
    transform: translateY(-18px) scale(.96);
    animation: pnGuidedNotification var(--pn-guided-cycle) cubic-bezier(.2,.85,.2,1) infinite;
}
.pn-guided-notification::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -8px;
    height: 12px;
    border-radius: 50%;
    background: rgba(83,96,228,.14);
    filter: blur(7px);
    opacity: 0;
    animation: pnGuidedNotificationGlow var(--pn-guided-cycle) ease infinite;
    pointer-events: none;
}
.pn-guided-notification-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: white;
    background: linear-gradient(135deg, #5d6cf1, #3b49c6);
    display: grid;
    place-items: center;
}
.pn-guided-notification-icon .pn-icon-svg { width: 16px; height: 16px; }
.pn-guided-notification > div { display: grid; gap: 1px; }
.pn-guided-notification small { color: #7c8495; font-size: 5.5px; font-weight: 850; letter-spacing: .08em; }
.pn-guided-notification strong { color: #1a1f2e; font-size: 8px; }
.pn-guided-notification p { margin: 0; color: #6c7383; font-size: 6.5px; }

.pn-guided-final {
    padding: 58px 30px 28px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 34%, rgba(92,105,239,.14), transparent 37%),
        linear-gradient(180deg, #fbfcff, #f3f5fb);
    transform: scale(.97);
    animation: pnGuidedFinal var(--pn-guided-cycle) cubic-bezier(.2,.8,.2,1) infinite;
}
.pn-guided-final-mark {
    position: relative;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #5c6bf0, #3744c0);
    display: grid;
    place-items: center;
}
.pn-guided-final-mark > span {
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(87,101,232,.32);
    border-radius: 50%;
    animation: pnGuidedFinalPulse var(--pn-guided-cycle) cubic-bezier(.16,.72,.3,1) infinite;
}
.pn-guided-final-mark .pn-icon-svg { position: relative; z-index: 2; width: 27px; height: 27px; }
.pn-guided-final-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7a86ff;
    opacity: 0;
    animation: pnGuidedFinalSpark var(--pn-guided-cycle) ease infinite;
}
.pn-guided-final-spark.s1 { left: -18px; top: 7px; }
.pn-guided-final-spark.s2 { right: -20px; top: 19px; background: #2bb8aa; }
.pn-guided-final-spark.s3 { left: 4px; bottom: -18px; background: #9b72ef; }
.pn-guided-final h3 { margin: 7px 0 11px; color: #171b29; font-size: 27px; line-height: 1.02; letter-spacing: -.045em; }
.pn-guided-final h3 em { color: #5865e7; font-style: normal; }
.pn-guided-final p { margin: 0; color: #7c8393; font-size: 7.5px; }

.pn-guided-bottom-nav {
    position: relative;
    z-index: 8;
    height: 59px;
    padding: 5px 10px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
}
.pn-guided-nav-item {
    min-width: 0;
    height: 46px;
    color: #808797;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    opacity: 0;
    transform: translateY(11px);
    animation: pnGuidedNav var(--pn-guided-cycle) cubic-bezier(.2,.85,.2,1) infinite;
    animation-delay: calc(var(--nav-index) * .12s);
}
.pn-guided-nav-item > .pn-icon-svg { width: 16px; height: 16px; }
.pn-guided-nav-item small { font-size: 5.5px; font-weight: 800; }
.pn-guided-nav-item.is-center { color: #5865e7; }
.pn-guided-nav-item.is-center b {
    width: 34px;
    height: 34px;
    margin-top: -12px;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #6170f7, #3f4dcc);
    display: grid;
    place-items: center;
    box-shadow: 0 9px 18px rgba(72,86,206,.24);
}
.pn-guided-nav-item.is-center b .pn-icon-svg { width: 17px; height: 17px; }

.pn-guided-device:not(.is-story-playing) *,
.pn-guided-device:not(.is-story-playing) *::before,
.pn-guided-device:not(.is-story-playing) *::after {
    animation: none !important;
}

.pn-landing-slide:not(.is-active) .pn-guided-device *,
.pn-landing-slide:not(.is-active) .pn-guided-device *::before,
.pn-landing-slide:not(.is-active) .pn-guided-device *::after {
    animation-play-state: paused !important;
}

@keyframes pnGuidedInterests {
    0%, 15.714% { opacity: 1; transform: translateX(0); }
    18.857% { opacity: 0; transform: translateX(-16%); }
    78.571% { opacity: 0; transform: translateX(-16%); }
}
@keyframes pnGuidedChip {
    0%, 0.786% { opacity: 0; transform: translateY(9px) scale(.94); }
    3.143%, 15.714% { opacity: 1; transform: translateY(0) scale(1); }
    18.071%, 78.571% { opacity: 0; transform: translateY(-3px) scale(1); }
}
@keyframes pnGuidedLearning {
    0%, 8.643% { opacity: 0; transform: translateY(12px); }
    11%, 15.714% { opacity: 1; transform: translateY(0); }
    18.071%, 78.571% { opacity: 0; transform: translateY(-4px); }
}
@keyframes pnGuidedMapScene {
    0%, 15.714% { opacity: 0; transform: translateX(18%); }
    18.857%, 45.571% { opacity: 1; transform: translateX(0); }
    48.714%, 78.571% { opacity: 0; transform: translateX(-14%); }
}
@keyframes pnGuidedRoute {
    0%, 18.857% { stroke-dashoffset: 450; }
    33.786%, 47.143% { stroke-dashoffset: 0; }
    78.571% { stroke-dashoffset: 0; }
}
@keyframes pnGuidedPinHike {
    0%, 23.571% { opacity: 0; transform: translateY(9px) scale(.8); }
    25.929%, 45.571% { opacity: 1; transform: translateY(0) scale(1); }
    47.929%, 78.571% { opacity: 0; transform: translateY(-3px) scale(.96); }
}
@keyframes pnGuidedPinCoffee {
    0%, 28.286% { opacity: 0; transform: translateY(9px) scale(.8); }
    30.643%, 45.571% { opacity: 1; transform: translateY(0) scale(1); }
    47.929%, 78.571% { opacity: 0; transform: translateY(-3px) scale(.96); }
}
@keyframes pnGuidedPinPhoto {
    0%, 33% { opacity: 0; transform: translateY(9px) scale(.8); }
    35.357%, 45.571% { opacity: 1; transform: translateY(0) scale(1); }
    47.929%, 78.571% { opacity: 0; transform: translateY(-3px) scale(.96); }
}
@keyframes pnGuidedBestMatch {
    0%, 37.714% { opacity: 0; transform: translateY(18px) scale(.965); }
    40.071%, 46.357% { opacity: 1; transform: translateY(0) scale(1); }
    48.714%, 78.571% { opacity: 0; transform: translateY(4px) scale(.985); }
}
@keyframes pnGuidedPulse {
    0% { opacity: .65; transform: scale(.62); }
    100% { opacity: 0; transform: scale(1.7); }
}
@keyframes pnGuidedCircleScene {
    0%, 44.786% { opacity: 0; transform: translateX(18%); }
    47.929%, 71.5% { opacity: 1; transform: translateX(0); }
    74.643%, 78.571% { opacity: 0; transform: translateX(-12%); }
}
@keyframes pnGuidedPerson {
    0%, 47.929% { opacity: 0; transform: scale(.58); }
    51.071%, 71.5% { opacity: 1; transform: scale(1); }
    74.643%, 78.571% { opacity: 0; transform: scale(.8); }
}
@keyframes pnGuidedActivityOne {
    0%, 50.286% { opacity: 0; transform: translateX(-9px); }
    52.643%, 62.857% { opacity: 1; transform: translateX(0); }
    65.214%, 78.571% { opacity: 0; transform: translateX(5px); }
}
@keyframes pnGuidedActivityTwo {
    0%, 53.429% { opacity: 0; transform: translateX(-9px); }
    55.786%, 62.857% { opacity: 1; transform: translateX(0); }
    65.214%, 78.571% { opacity: 0; transform: translateX(5px); }
}
@keyframes pnGuidedNotification {
    0%, 57.357% { opacity: 0; transform: translateY(-18px) scale(.96); }
    59.714%, 64.429% { opacity: 1; transform: translateY(0) scale(1); }
    66.786%, 78.571% { opacity: 0; transform: translateY(-7px) scale(.98); }
}
@keyframes pnGuidedChat {
    0%, 62.857% { opacity: 0; transform: translateY(11px); }
    65.214%, 71.5% { opacity: 1; transform: translateY(0); }
    73.857%, 78.571% { opacity: 0; transform: translateY(-4px); }
}
@keyframes pnGuidedJoin {
    0%, 65.214% { opacity: 0; transform: scale(.94); }
    67.571%, 71.5% { opacity: 1; transform: scale(1); }
    73.857%, 78.571% { opacity: 0; transform: scale(.97); }
}
@keyframes pnGuidedFinal {
    0%, 71.5% { opacity: 0; transform: scale(.97); }
    73.857%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes pnGuidedFinalPulse {
    0%, 73.857% { opacity: 0; transform: scale(.75); }
    74.5% { opacity: .7; transform: scale(.75); }
    78.571%, 100% { opacity: 0; transform: scale(1.45); }
}
@keyframes pnGuidedRouteAura {
    0%, 17.286% { opacity: 0; stroke-dashoffset: 450; }
    19.643% { opacity: .34; }
    33.786%, 45.571% { opacity: .22; stroke-dashoffset: 0; }
    47.929%, 78.571% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes pnGuidedMapAurora {
    0%, 14.929% { opacity: 0; transform: translate3d(-8px,10px,0) scale(.72); }
    19.643%, 43.214% { opacity: .30; transform: translate3d(18px,-12px,0) scale(1.08); }
    47.143%, 78.571% { opacity: 0; transform: translate3d(26px,-18px,0) scale(1.12); }
}
@keyframes pnGuidedPinHaloHike {
    0%, 22.786% { opacity: 0; transform: scale(.5); }
    24.357% { opacity: .48; transform: scale(.72); }
    27.5% { opacity: 0; transform: scale(1.75); }
    78.571% { opacity: 0; transform: scale(1.75); }
}
@keyframes pnGuidedPinHaloCoffee {
    0%, 27.5% { opacity: 0; transform: scale(.5); }
    29.071% { opacity: .45; transform: scale(.72); }
    32.214% { opacity: 0; transform: scale(1.75); }
    78.571% { opacity: 0; transform: scale(1.75); }
}
@keyframes pnGuidedPinHaloPhoto {
    0%, 32.214% { opacity: 0; transform: scale(.5); }
    33.786% { opacity: .42; transform: scale(.72); }
    36.929% { opacity: 0; transform: scale(1.75); }
    78.571% { opacity: 0; transform: scale(1.75); }
}
@keyframes pnGuidedMatchSheen {
    0%, 37.714% { transform: skewX(-15deg) translateX(-250%); opacity: 0; }
    39.286% { opacity: .8; }
    44% { transform: skewX(-15deg) translateX(650%); opacity: 0; }
    78.571% { transform: skewX(-15deg) translateX(650%); opacity: 0; }
}
@keyframes pnGuidedCoverAurora {
    0%, 42.429% { opacity: 0; transform: translate3d(-12px,8px,0) scale(.82); }
    47.143%, 69.143% { opacity: .9; transform: translate3d(54px,26px,0) scale(1.18); }
    73.071%, 78.571% { opacity: 0; transform: translate3d(66px,30px,0) scale(1.22); }
}
@keyframes pnGuidedNotificationGlow {
    0%, 55.786% { opacity: 0; transform: scaleX(.72); }
    58.143%, 62.857% { opacity: .85; transform: scaleX(1); }
    65.214%, 78.571% { opacity: 0; transform: scaleX(.82); }
}
@keyframes pnGuidedFinalSpark {
    0%, 71.5% { opacity: 0; transform: scale(.5) translate3d(0,5px,0); }
    73.857% { opacity: .9; transform: scale(1) translate3d(0,0,0); }
    77% { opacity: .25; transform: scale(.72) translate3d(0,-8px,0); }
    78.571% { opacity: 0; transform: scale(.5) translate3d(0,-10px,0); }
}
@keyframes pnGuidedNav {
    0%, 0.786% { opacity: 0; transform: translateY(11px); }
    3.143%, 73.857% { opacity: 1; transform: translateY(0); }
    77%, 78.571% { opacity: 0; transform: translateY(5px); }
}

@media (max-height: 780px) and (min-width: 761px) {
    .pn-guided-device { min-height: 450px; }
    .pn-guided-screen { height: 322px; }
    .pn-guided-topbar { height: 47px; }
    .pn-guided-bottom-nav { height: 53px; }
    .pn-guided-interests { padding: 24px 22px 18px; }
    .pn-guided-interests h3 { font-size: 21px; }
    .pn-guided-chips { margin-top: 15px; gap: 6px; }
    .pn-guided-chip { padding: 7px 9px; }
    .pn-guided-learning { left: 22px; right: 22px; bottom: 18px; padding: 8px; }
    .pn-guided-circle-cover { height: 78px; }
    .pn-guided-circle-body { padding: 10px 15px; }
    .pn-guided-circle-body h3 { font-size: 17px; }
    .pn-guided-people { margin-top: 8px; padding: 5px 0; }
    .pn-guided-person { width: 23px; height: 23px; }
    .pn-guided-activity { margin-top: 5px; }
    .pn-guided-chat { bottom: 40px; padding: 6px; }
    .pn-guided-join { bottom: 8px; }
    .pn-guided-final { padding-top: 37px; }
}

@media (max-width: 760px) {
    .pn-guided-device {
        width: 255px;
        min-height: 382px;
        right: -76px;
        bottom: -48px;
        opacity: .34;
    }
    .pn-guided-topbar { height: 43px; padding-inline: 4px; }
    .pn-guided-brand small, .pn-guided-live { display: none; }
    .pn-guided-screen { height: 278px; border-radius: 19px; }
    .pn-guided-bottom-nav { height: 48px; padding-inline: 4px; }
    .pn-guided-nav-item { height: 38px; }
    .pn-guided-nav-item small { display: none; }
    .pn-guided-nav-item.is-center b { width: 30px; height: 30px; margin-top: -6px; }
    .pn-guided-interests { padding: 24px 18px; }
    .pn-guided-interests h3 { font-size: 19px; }
    .pn-guided-interests > p { font-size: 7px; }
    .pn-guided-chips { margin-top: 13px; gap: 5px; }
    .pn-guided-chip { padding: 7px 8px; font-size: 7px; }
    .pn-guided-learning { left: 15px; right: 15px; bottom: 17px; padding: 7px; }
    .pn-guided-learning > span { width: 27px; height: 27px; }
    .pn-guided-route { inset: 11px 9px 38px; width: calc(100% - 18px); height: calc(100% - 49px); }
    .pn-guided-origin { left: 23px; bottom: 31px; width: 32px; height: 32px; }
    .pn-guided-route-label.start { left: 60px; bottom: 34px; }
    .pn-guided-route-label.end { right: 17px; top: 12px; }
    .pn-guided-circle-pin { transform-origin: center; }
    .pn-guided-circle-pin.pin-hike { left: 30px; top: 80px; }
    .pn-guided-circle-pin.pin-coffee { right: 10px; top: 135px; }
    .pn-guided-circle-pin.pin-photo { right: 22px; top: 47px; }
    .pn-guided-circle-pin > span { width: 22px; height: 22px; font-size: 10px; }
    .pn-guided-circle-pin strong { font-size: 5.5px; }
    .pn-guided-best-match { left: 8px; right: 8px; bottom: 7px; padding: 7px; }
    .pn-guided-match-icon { width: 28px; height: 28px; font-size: 13px; }
    .pn-guided-circle-cover { height: 73px; }
    .pn-guided-cover-emoji { font-size: 24px; }
    .pn-guided-circle-body { padding: 9px 12px; }
    .pn-guided-circle-body h3 { font-size: 15px; margin-block: 3px; }
    .pn-guided-people { margin-top: 6px; padding: 4px 0; }
    .pn-guided-person { width: 21px; height: 21px; }
    .pn-guided-activity { margin-top: 4px; }
    .pn-guided-activity > span { width: 20px; height: 20px; }
    .pn-guided-chat { left: 10px; right: 10px; bottom: 34px; padding: 6px; }
    .pn-guided-join { right: 10px; bottom: 7px; min-height: 23px; }
    .pn-guided-notification { left: 8px; right: 8px; top: 7px; padding: 7px; }
    .pn-guided-notification-icon { width: 29px; height: 29px; }
    .pn-guided-final { padding: 37px 18px 15px; }
    .pn-guided-final-mark { width: 48px; height: 48px; margin-bottom: 13px; }
    .pn-guided-final h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-guided-device * { animation: none !important; }
    .pn-guided-interests { display: none; }
    .pn-guided-map-scene { opacity: 1; transform: none; }
    .pn-guided-route-line { stroke-dashoffset: 0; }
    .pn-guided-circle-pin { opacity: 1; transform: none; }
    .pn-guided-best-match { opacity: 1; transform: none; }
    .pn-guided-notification, .pn-guided-circle-scene, .pn-guided-final { display: none; }
    .pn-guided-nav-item { opacity: 1; transform: none; }
}


/* v2.15.46 — premium device frame for the Guided Discovery hero.
 * Adapted from the user-supplied phone-frame HTML/SCSS. The lock-screen-only
 * controls were intentionally omitted so the Nudjee app remains the focus. */
.pn-guided-device {
    width: min(100%, 354px);
    min-height: 604px;
    padding: 0;
    overflow: visible;
    border: .75px solid rgba(255,255,255,.82);
    border-radius: 50px;
    background: linear-gradient(145deg, #d8dce5 0%, #737985 15%, #1d2027 48%, #656b76 82%, #dce0e7 100%);
    box-shadow:
        0 2.8px 2.2px rgba(0,0,0,.034),
        0 6.7px 5.3px rgba(0,0,0,.048),
        0 12.5px 10px rgba(0,0,0,.06),
        0 22.3px 17.9px rgba(0,0,0,.072),
        0 41.8px 33.4px rgba(0,0,0,.086),
        0 70px 72px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.13);
    transform: rotate(1.15deg);
    isolation: isolate;
}
.pn-guided-device::before {
    inset: 2px;
    z-index: 0;
    border-radius: 48px;
    background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.015) 22%, rgba(0,0,0,.32) 67%, rgba(255,255,255,.12));
    pointer-events: none;
}
.pn-guided-inside-border {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 604px;
    overflow: hidden;
    border: 7px solid #050609;
    border-radius: 49px;
    background: #f7f9fc;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        inset 0 0 20px rgba(0,0,0,.12);
}
.pn-guided-app-shell {
    position: absolute;
    inset: 25px 0 9px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0 39px 39px;
    background: linear-gradient(180deg, #fbfcff 0%, #f1f4f9 100%);
}
.pn-guided-statusbar {
    position: absolute;
    z-index: 30;
    inset: 0 0 auto;
    height: 30px;
    padding: 7px 17px 0 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: #11141b;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    pointer-events: none;
}
.pn-guided-time {
    min-width: 44px;
    font-size: 10px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -.025em;
}
.pn-guided-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 10px;
}
.pn-guided-signal {
    width: 13px;
    height: 8px;
    display: flex;
    align-items: flex-end;
    gap: 1px;
}
.pn-guided-signal b {
    display: block;
    width: 2px;
    border-radius: 2px;
    background: currentColor;
}
.pn-guided-signal b:nth-child(1) { height: 3px; opacity: .74; }
.pn-guided-signal b:nth-child(2) { height: 4.5px; opacity: .82; }
.pn-guided-signal b:nth-child(3) { height: 6px; opacity: .9; }
.pn-guided-signal b:nth-child(4) { height: 8px; }
.pn-guided-wifi {
    width: 11px;
    height: 8px;
    position: relative;
    display: block;
    overflow: hidden;
}
.pn-guided-wifi::before,
.pn-guided-wifi::after {
    content: "";
    position: absolute;
    left: 50%;
    border: 1.2px solid currentColor;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: translateX(-50%);
}
.pn-guided-wifi::before { top: 1px; width: 11px; height: 9px; }
.pn-guided-wifi::after { top: 4px; width: 5px; height: 4px; }
.pn-guided-battery {
    position: relative;
    display: block;
    width: 17px;
    height: 8px;
    border: .8px solid rgba(17,20,27,.64);
    border-radius: 2.4px;
}
.pn-guided-battery b {
    display: block;
    width: calc(78% - 2px);
    height: calc(100% - 2px);
    margin: 1px;
    border-radius: 1px;
    background: currentColor;
}
.pn-guided-battery em {
    position: absolute;
    right: -2.4px;
    top: 2px;
    width: 1.5px;
    height: 3px;
    border-radius: 0 1px 1px 0;
    background: rgba(17,20,27,.54);
}
.pn-guided-camera {
    position: absolute;
    z-index: 35;
    top: -1px;
    left: 50%;
    width: 84px;
    height: 23px;
    transform: translateX(-50%);
    border-radius: 0 0 17px 17px;
    background: #030406;
    box-shadow: 0 1px 0 rgba(255,255,255,.04);
    pointer-events: none;
}
.pn-guided-camera-dot {
    position: absolute;
    left: 14px;
    top: 7px;
    width: 6px;
    height: 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
}
.pn-guided-camera-dot i {
    position: absolute;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: rgba(95,121,193,.42);
    box-shadow: 0 0 5px rgba(86,112,200,.34);
}
.pn-guided-camera-dot b {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    background: #020307;
}
.pn-guided-camera-speaker {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 31px;
    height: 2px;
    transform: translateX(-36%);
    border-radius: 999px;
    background: rgba(255,255,255,.15);
}
.pn-guided-silencer,
.pn-guided-volume-up,
.pn-guided-volume-down,
.pn-guided-power {
    position: absolute;
    z-index: 1;
    display: block;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(135,141,150,.82) 38%, rgba(43,47,54,.92));
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.24);
    opacity: .92;
}
.pn-guided-silencer { left: -3px; top: 99px; width: 3px; height: 18px; }
.pn-guided-volume-up { left: -3px; top: 136px; width: 3px; height: 36px; }
.pn-guided-volume-down { left: -3px; top: 180px; width: 3px; height: 36px; }
.pn-guided-power { right: -3px; top: 147px; width: 3px; height: 56px; }
.pn-guided-home-indicator {
    position: absolute;
    z-index: 40;
    left: 50%;
    bottom: 4px;
    width: 92px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(21,24,31,.78);
    pointer-events: none;
}
.pn-guided-topbar {
    flex: 0 0 50px;
    height: 50px;
    padding: 7px 11px 7px;
}
.pn-guided-screen {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin: 0 7px;
    border-radius: 24px;
}
.pn-guided-bottom-nav {
    flex: 0 0 56px;
    height: 56px;
    padding: 4px 12px 4px;
}
@media (max-height: 780px) and (min-width: 761px) {
    .pn-guided-device { width: min(100%, 326px); min-height: 556px; }
    .pn-guided-inside-border { height: 556px; }
    .pn-guided-topbar { flex-basis: 44px; height: 44px; }
    .pn-guided-bottom-nav { flex-basis: 50px; height: 50px; }
}

@media (max-width: 760px) {
    .pn-guided-device {
        width: 248px;
        min-height: 430px;
        right: -78px;
        bottom: -50px;
        opacity: .38;
        transform: rotate(6deg);
    }
    .pn-guided-inside-border { height: 430px; border-width: 5px; border-radius: 38px; }
    .pn-guided-device, .pn-guided-device::before { border-radius: 39px; }
    .pn-guided-app-shell { inset: 21px 0 7px; border-radius: 0 0 31px 31px; }
    .pn-guided-camera { width: 66px; height: 19px; border-radius: 0 0 14px 14px; }
    .pn-guided-camera-dot { left: 11px; top: 6px; width: 5px; height: 5px; }
    .pn-guided-camera-speaker { top: 6px; width: 24px; }
    .pn-guided-statusbar { height: 24px; padding: 6px 12px 0 14px; }
    .pn-guided-time { font-size: 7.5px; }
    .pn-guided-status-icons { transform: scale(.78); transform-origin: right top; }
    .pn-guided-silencer { top: 73px; height: 13px; }
    .pn-guided-volume-up { top: 98px; height: 25px; }
    .pn-guided-volume-down { top: 130px; height: 25px; }
    .pn-guided-power { top: 104px; height: 40px; }
    .pn-guided-home-indicator { width: 66px; height: 2px; bottom: 3px; }
    .pn-guided-topbar { flex: 0 0 40px; height: 40px; }
    .pn-guided-screen { height: auto; margin-inline: 5px; border-radius: 18px; }
    .pn-guided-bottom-nav { flex: 0 0 45px; height: 45px; }
}


/* ==========================================================
   2.15.47 — minimal first-slide hierarchy
   Title → explanation → Guided Discovery → CTAs → safety.
   ========================================================== */
#pn-landing-top.pn-landing-hero.pn-landing-slide {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(20px, 2.8vh, 34px) clamp(22px, 5vw, 64px) clamp(20px, 3vh, 34px);
    text-align: center;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}
#pn-landing-top.pn-landing-hero.pn-landing-slide::-webkit-scrollbar { display: none; }

#pn-landing-top .pn-landing-copy-minimal {
    position: relative;
    z-index: 4;
    width: min(100%, 920px);
    max-width: 920px;
    min-height: min-content;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

#pn-landing-top .pn-landing-copy-minimal h1 {
    order: 1;
    max-width: 860px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4.6vw, 58px);
    line-height: 1.01;
    letter-spacing: -.052em;
    text-wrap: balance;
}

#pn-landing-top .pn-landing-copy-minimal > p {
    order: 2;
    max-width: 720px;
    margin: 11px 0 0;
    color: rgba(255,255,255,.72);
    font-size: clamp(13px, 1.25vw, 16px);
    line-height: 1.5;
    text-wrap: balance;
}

#pn-landing-top .pn-guided-device-stage {
    --pn-hero-device-scale: .75;
    order: 3;
    position: relative;
    flex: 0 0 auto;
    width: 280px;
    height: 453px;
    margin: 18px auto 0;
    display: block;
}

#pn-landing-top .pn-guided-device-stage > .pn-guided-device {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform-origin: top center !important;
    transform: translateX(-50%) scale(var(--pn-hero-device-scale)) rotate(1deg) !important;
}

#pn-landing-top .pn-guest-actions {
    order: 4;
    width: auto;
    margin: 16px 0 0;
    justify-content: center;
    gap: 10px;
}

#pn-landing-top .pn-guest-actions .pn-btn {
    min-height: 46px;
    padding-inline: 20px;
}

#pn-landing-top .pn-landing-proof {
    order: 5;
    width: auto;
    margin: 12px 0 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}

#pn-landing-top .pn-landing-proof span {
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.74);
    font-size: 9px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#pn-landing-top .pn-landing-proof .pn-icon-svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #8f9cff;
}

@media (max-height: 780px) and (min-width: 761px) {
    #pn-landing-top.pn-landing-hero.pn-landing-slide {
        padding-block: 15px;
    }
    #pn-landing-top .pn-landing-copy-minimal h1 {
        font-size: clamp(34px, 4.1vw, 48px);
    }
    #pn-landing-top .pn-landing-copy-minimal > p {
        margin-top: 8px;
        font-size: 12px;
    }
    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: .64;
        width: 230px;
        height: 356px;
        margin-top: 11px;
    }
    #pn-landing-top .pn-guest-actions { margin-top: 10px; }
    #pn-landing-top .pn-landing-proof { margin-top: 8px; }
}

@media (max-width: 760px) {
    #pn-landing-top.pn-landing-hero.pn-landing-slide {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding: 18px 14px max(22px, env(safe-area-inset-bottom));
        text-align: center;
    }

    #pn-landing-top .pn-landing-copy-minimal {
        width: 100%;
        max-width: 520px;
        margin: auto;
        align-self: auto;
    }

    #pn-landing-top .pn-landing-copy-minimal h1 {
        max-width: 96%;
        margin: 0;
        font-size: clamp(29px, 8.8vw, 38px);
        line-height: 1.01;
    }

    #pn-landing-top .pn-landing-copy-minimal > p {
        max-width: 94%;
        margin-top: 8px;
        font-size: clamp(10.5px, 2.85vw, 12.5px);
        line-height: 1.42;
    }

    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: .78;
        width: 205px;
        height: 336px;
        margin-top: 12px;
    }

    #pn-landing-top .pn-guided-device-stage > .pn-guided-device {
        /* v2.15.46 already swaps the frame to a 248 × 430 mobile chassis. */
        width: 248px !important;
        min-height: 430px !important;
        transform: translateX(-50%) scale(var(--pn-hero-device-scale)) rotate(1deg) !important;
    }

    #pn-landing-top .pn-guided-device-stage .pn-guided-inside-border {
        height: 430px !important;
    }

    #pn-landing-top .pn-guest-actions {
        width: min(100%, 330px);
        margin-top: 11px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #pn-landing-top .pn-guest-actions .pn-btn {
        min-width: 0;
        min-height: 40px;
        padding: 8px 10px;
        font-size: 10px;
    }

    #pn-landing-top .pn-landing-proof {
        width: min(100%, 350px);
        margin-top: 9px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    #pn-landing-top .pn-landing-proof span {
        min-width: 0;
        min-height: 30px;
        padding: 6px 5px;
        justify-content: center;
        gap: 4px;
        font-size: 7.2px;
        white-space: normal;
        text-align: left;
    }

    #pn-landing-top .pn-landing-proof .pn-icon-svg {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }
}

@media (max-width: 760px) and (max-height: 720px) {
    #pn-landing-top.pn-landing-hero.pn-landing-slide { padding-block: 12px 18px; }
    #pn-landing-top .pn-landing-copy-minimal h1 { font-size: clamp(26px, 8vw, 33px); }
    #pn-landing-top .pn-landing-copy-minimal > p { margin-top: 6px; font-size: 9.8px; }
    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: .60;
        width: 155px;
        height: 258px;
        margin-top: 8px;
    }
    #pn-landing-top .pn-guest-actions { margin-top: 8px; }
    #pn-landing-top .pn-landing-proof { margin-top: 7px; }
}


/* =========================================================
   2.15.48 — Guided Discovery six-second final hold
   The original ~22s story resolves at 22s, then the final screen
   remains static until the 28s loop restarts.
   ========================================================= */

/* =========================================================
   2.15.49 — responsive first-slide composition
   Wide screens: copy/CTAs/safety left, Guided Discovery right.
   Narrow tablets + phones retain the v2.15.47 stacked sequence.
   ========================================================= */
@media (min-width: 980px) {
    #pn-landing-top.pn-landing-hero.pn-landing-slide {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: clamp(24px, 4vh, 48px) clamp(34px, 6vw, 92px);
        text-align: left;
        overflow-y: auto;
    }

    #pn-landing-top .pn-landing-copy-minimal {
        width: min(100%, 1240px);
        max-width: 1240px;
        margin: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(292px, 360px);
        grid-template-rows: repeat(4, min-content);
        column-gap: clamp(34px, 5.5vw, 92px);
        row-gap: 0;
        align-content: center;
        align-items: start;
        text-align: left;
    }

    #pn-landing-top .pn-landing-copy-minimal h1 {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        max-width: 650px;
        margin: 0;
        font-size: clamp(42px, 4.4vw, 68px);
        line-height: .99;
        text-align: left;
    }

    #pn-landing-top .pn-landing-copy-minimal > p {
        grid-column: 1;
        grid-row: 2;
        max-width: 590px;
        margin: 17px 0 0;
        font-size: clamp(14px, 1.25vw, 17px);
        line-height: 1.55;
        text-align: left;
    }

    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: .82;
        grid-column: 2;
        grid-row: 1 / 5;
        align-self: center;
        justify-self: center;
        width: 294px;
        height: 500px;
        margin: 0;
    }

    #pn-landing-top .pn-guest-actions {
        grid-column: 1;
        grid-row: 3;
        width: auto;
        margin: 26px 0 0;
        justify-content: flex-start;
    }

    #pn-landing-top .pn-landing-proof {
        grid-column: 1;
        grid-row: 4;
        width: auto;
        margin: 15px 0 0;
        justify-content: flex-start;
    }
}

/* Wide tablets / compact laptops: retain the split, but tighten both columns. */
@media (min-width: 980px) and (max-width: 1199px) {
    #pn-landing-top.pn-landing-hero.pn-landing-slide {
        padding-inline: clamp(28px, 4vw, 48px);
    }

    #pn-landing-top .pn-landing-copy-minimal {
        grid-template-columns: minmax(0, 1fr) 278px;
        column-gap: clamp(28px, 4vw, 46px);
    }

    #pn-landing-top .pn-landing-copy-minimal h1 {
        max-width: 540px;
        font-size: clamp(39px, 4.3vw, 52px);
    }

    #pn-landing-top .pn-landing-copy-minimal > p {
        max-width: 530px;
        font-size: 13px;
    }

    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: .76;
        width: 270px;
        height: 462px;
    }

    #pn-landing-top .pn-guest-actions { margin-top: 20px; }
    #pn-landing-top .pn-landing-proof { margin-top: 12px; }
    #pn-landing-top .pn-landing-proof span { padding-inline: 9px; font-size: 8px; }
}

/* Full desktop: let the animation regain more physical presence. */
@media (min-width: 1200px) {
    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: .92;
        width: 326px;
        height: 558px;
    }
}

@media (min-width: 1500px) and (min-height: 820px) {
    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: 1;
        width: 354px;
        height: 604px;
    }
}

/* Short landscape screens still use the split, with a smaller phone. */
@media (min-width: 980px) and (max-height: 780px) {
    #pn-landing-top.pn-landing-hero.pn-landing-slide {
        padding-block: 14px;
    }

    #pn-landing-top .pn-landing-copy-minimal h1 {
        font-size: clamp(36px, 4vw, 50px);
    }

    #pn-landing-top .pn-landing-copy-minimal > p {
        margin-top: 10px;
        font-size: 12px;
    }

    #pn-landing-top .pn-guided-device-stage {
        --pn-hero-device-scale: .78;
        width: 256px;
        height: 436px;
        margin: 0;
    }

    #pn-landing-top .pn-guest-actions { margin-top: 16px; }
    #pn-landing-top .pn-landing-proof { margin-top: 9px; }
}


/* ==========================================================================\n   Nudjee 2.15.50 — mobile containment for Circles / Smart Radar / Circle access\n   These content-rich slides intentionally become vertically scrollable below\n   desktop widths instead of being compressed into the fixed landing viewport.\n   ========================================================================== */

@media (max-width: 960px) {
    #pn-circles.pn-landing-slide,
    #pn-smart-circles.pn-landing-slide,
    #pn-circle-access.pn-landing-slide {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
        scroll-padding-block: 20px 96px;
        justify-content: flex-start !important;
        touch-action: pan-y;
    }

    #pn-circles.pn-landing-slide::-webkit-scrollbar,
    #pn-smart-circles.pn-landing-slide::-webkit-scrollbar,
    #pn-circle-access.pn-landing-slide::-webkit-scrollbar {
        display: none;
    }

    #pn-circles .pn-circle-landing-grid,
    #pn-smart-circles .pn-smart-radar-grid,
    #pn-circle-access .pn-circle-access-grid {
        height: auto;
        min-height: 100%;
    }
}

@media (max-width: 760px) {
    /* Reserve real room for the fixed progress rail and phone safe area. */
    #pn-circles.pn-landing-slide,
    #pn-smart-circles.pn-landing-slide,
    #pn-circle-access.pn-landing-slide {
        padding-top: clamp(20px, 3dvh, 28px) !important;
        padding-bottom: calc(var(--pn-mobile-controls-h) + 48px) !important;
        align-items: stretch !important;
    }

    #pn-circles .pn-circle-landing-grid,
    #pn-smart-circles .pn-smart-radar-grid,
    #pn-circle-access .pn-circle-access-grid {
        min-height: 0;
        align-content: start;
        align-items: stretch;
        gap: 20px;
    }

    /* Circles — let the information breathe rather than shrinking the demo\n       until cards collide with each other. */
    #pn-circles .pn-circle-landing-copy h2,
    #pn-circle-access .pn-circle-landing-copy h2 {
        margin: 7px 0 11px;
        font-size: clamp(30px, 8.6vw, 38px);
        line-height: 1.03;
        text-wrap: balance;
    }

    #pn-circles .pn-circle-landing-copy > p,
    #pn-circle-access .pn-circle-landing-copy > p {
        font-size: clamp(11px, 3.1vw, 13px);
        line-height: 1.55;
    }

    #pn-circles .pn-circle-feature-list,
    #pn-circle-access .pn-circle-access-points {
        margin-top: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #pn-circles .pn-circle-feature-list > span,
    #pn-circle-access .pn-circle-access-points > span {
        min-height: 78px;
        padding: 10px;
        align-content: center;
    }

    #pn-circles .pn-circle-feature-list strong,
    #pn-circle-access .pn-circle-access-points b {
        font-size: 9px;
        line-height: 1.25;
    }

    #pn-circles .pn-circle-feature-list small,
    #pn-circle-access .pn-circle-access-points small {
        font-size: 7.4px;
        line-height: 1.38;
    }

    #pn-circles .pn-circles-marketing-visual,
    #pn-circle-access .pn-circle-reach-visual {
        margin-top: 2px;
        overflow: hidden;
        flex: none;
    }

    #pn-circles .pn-circles-marketing-visual {
        padding: 12px;
        border-radius: 24px;
    }

    #pn-circles .pn-marketing-circle-hero { height: 108px; }
    #pn-circles .pn-marketing-circle-body { min-height: 58px; padding: 10px 11px; }
    #pn-circles .pn-marketing-circle-body strong { font-size: 9px; }
    #pn-circles .pn-marketing-circle-body small { font-size: 7px; }
    #pn-circles .pn-circle-chat-peek { margin-bottom: 2px; }

    /* Smart Radar — copy and feature cards remain readable, then the route\n       demo appears as its own complete block beneath them. */
    #pn-smart-circles .pn-smart-radar-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    #pn-smart-circles .pn-smart-radar-copy h2 {
        max-width: 100%;
        margin: 7px 0 11px;
        font-size: clamp(30px, 8.6vw, 38px);
        line-height: 1.03;
        letter-spacing: -.045em;
        text-wrap: balance;
    }

    #pn-smart-circles .pn-smart-radar-copy > p {
        max-width: 100%;
        margin: 0;
        font-size: clamp(11px, 3.1vw, 13px);
        line-height: 1.55;
    }

    #pn-smart-circles .pn-smart-radar-points {
        margin-top: 15px;
        gap: 9px;
    }

    #pn-smart-circles .pn-smart-radar-points > span {
        min-height: 82px;
        padding: 11px 12px;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 10px;
        border-radius: 17px;
    }

    #pn-smart-circles .pn-smart-radar-points svg {
        width: 20px;
        height: 20px;
    }

    #pn-smart-circles .pn-smart-radar-points strong {
        font-size: 12px;
        line-height: 1.3;
    }

    #pn-smart-circles .pn-smart-radar-points small {
        font-size: 10px;
        line-height: 1.42;
    }

    #pn-smart-circles .pn-smart-radar-safety {
        margin-top: 13px;
        font-size: 10px;
        line-height: 1.5;
    }

    #pn-smart-circles .pn-smart-radar-visual {
        width: 100%;
        min-height: 390px;
        flex: none;
        border-radius: 25px;
    }

    #pn-smart-circles .pn-smart-route-map {
        inset: 16px 16px 108px;
    }

    #pn-smart-circles .pn-smart-match-chip {
        right: 12px;
        top: 12px;
        max-width: calc(100% - 24px);
    }

    #pn-smart-circles .pn-smart-notification-demo {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 11px 12px;
        grid-template-columns: 40px minmax(0, 1fr);
    }

    #pn-smart-circles .pn-smart-notification-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 20px;
    }

    #pn-smart-circles .pn-smart-notification-demo strong { font-size: 11px; line-height: 1.3; }
    #pn-smart-circles .pn-smart-notification-demo em { font-size: 9px; line-height: 1.35; white-space: normal; }

    /* Circle access — copy first, visual second, each with its own natural\n       height. No absolute/fixed overlap with the progress dots. */
    #pn-circle-access .pn-circle-access-copy { order: 1; }
    #pn-circle-access .pn-circle-reach-visual {
        order: 2;
        padding: 12px;
        border-radius: 24px;
    }

    #pn-circle-access .pn-circle-reach-map {
        height: clamp(190px, 50vw, 235px);
        border-radius: 18px;
    }

    #pn-circle-access .pn-circle-reach-controls {
        margin-top: 9px;
        gap: 7px;
    }

    #pn-circle-access .pn-circle-reach-controls > div { gap: 7px; }
    #pn-circle-access .pn-reach-choice { min-height: 63px; padding: 8px; }
    #pn-circle-access .pn-reach-choice b { font-size: 7.5px; }
    #pn-circle-access .pn-reach-choice small { font-size: 6.4px; line-height: 1.3; }
    #pn-circle-access .pn-circle-member-pass { margin-top: 8px; padding: 8px 9px; }
    #pn-circle-access .pn-circle-member-pass strong { font-size: 7.4px; }
    #pn-circle-access .pn-circle-member-pass small { font-size: 6.3px; }

    /* On these long slides the fixed down-arrow is redundant and was visibly\n       sitting over cards in the supplied mobile screenshots. */
    .pn-landing.has-scrollable-feature-slide .pn-landing-scroll-hint {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 430px) {
    #pn-circles .pn-circle-feature-list,
    #pn-circle-access .pn-circle-access-points {
        grid-template-columns: 1fr;
    }

    #pn-circles .pn-circle-feature-list > span,
    #pn-circle-access .pn-circle-access-points > span {
        min-height: 62px;
    }

    #pn-circles .pn-circle-topic-strip {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #pn-circles .pn-circle-topic-strip::-webkit-scrollbar { display: none; }

    #pn-circles .pn-marketing-circle-mini-grid {
        grid-template-columns: 1fr;
    }

    #pn-smart-circles .pn-smart-radar-visual { min-height: 360px; }
}

@media (max-width: 760px) and (max-height: 720px) {
    /* Earlier builds hid these feature lists to force-fit one viewport. They\n       now scroll naturally, so keep the information available instead. */
    #pn-circles .pn-circle-feature-list,
    #pn-circle-access .pn-circle-access-points {
        display: grid;
    }

    #pn-circles .pn-circle-topic-strip,
    #pn-circles .pn-circle-chat-peek {
        display: flex;
    }

    #pn-circles .pn-circle-chat-peek {
        display: grid;
    }

    #pn-circle-access .pn-circle-reach-map { height: clamp(180px, 48vw, 220px); }
}

/* ==========================================================================\n   Nudjee 2.15.51 — simplify Circle Access slide on phones\n   Keep the explanatory content and feature points, but remove the large\n   map/control showcase on phone widths. Tablet and desktop retain it.\n   ========================================================================== */
@media (max-width: 760px) {
    #pn-circle-access .pn-circle-reach-visual {
        display: none !important;
    }

    #pn-circle-access .pn-circle-access-grid {
        display: block;
        min-height: 0;
    }

    #pn-circle-access .pn-circle-access-copy {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    #pn-circle-access.pn-landing-slide {
        padding-bottom: calc(var(--pn-mobile-controls-h) + 32px) !important;
    }
}


/* ==========================================================================
   Nudjee 2.15.57 — Authentic Product UI hero (A/B variant B)
   The first-slide phone now uses the real application's visual language and
   component structure rather than a simplified marketing mock. 28s cycle:
   Profile -> Nearby -> Notifications -> Circles -> detail; 22-28s final hold.
   ========================================================================== */
.pn-authentic-demo {
    --pn-auth-cycle: 28s;
    --pn-auth-purple: #7462f5;
    --pn-auth-purple-soft: rgba(116,98,245,.11);
    --pn-auth-ink: #292531;
    --pn-auth-muted: #7f7987;
    --pn-auth-line: #ebe8ee;
    --pn-auth-surface: #f7f6f9;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    color: var(--pn-auth-ink);
    background: #f7f6f9;
}
.pn-authentic-demo .pn-icon-svg { display:block; }

/* persistent real-app chrome */
.pn-auth-demo-header {
    flex: 0 0 54px;
    min-height: 54px;
    padding: 7px 11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(35,32,45,.06);
    background:linear-gradient(135deg,#6a5eea 0%,#6c67ef 50%,#585fe1 100%);
    color:#fff;
    position:relative;
    z-index:20;
    box-shadow:0 7px 20px rgba(72,61,161,.17);
}
.pn-auth-demo-brand { display:flex;align-items:center;gap:7px;min-width:0; }
.pn-auth-demo-brand .pn-brand-mark { width:29px;height:29px;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.pn-auth-demo-brand .pn-brand-mark .pn-icon-svg { width:15px;height:15px; }
.pn-auth-demo-brand > span:last-child { display:grid;gap:1px;text-align:left; }
.pn-auth-demo-brand strong { font-size:11px;line-height:1;font-weight:850;letter-spacing:-.035em; }
.pn-auth-demo-brand small { color:rgba(255,255,255,.7);font-size:5.7px;font-weight:750; }
.pn-auth-demo-actions { display:flex;gap:5px; }
.pn-auth-demo-actions > i {
    position:relative;width:27px;height:27px;border:1px solid rgba(255,255,255,.14);border-radius:9px;
    display:grid;place-items:center;background:rgba(255,255,255,.10);color:#fff;font-style:normal;
}
.pn-auth-demo-actions .pn-icon-svg { width:13px;height:13px; }
.pn-auth-demo-actions i b { position:absolute;right:4px;top:4px;width:4px;height:4px;border:1px solid #675ee9;border-radius:50%;background:#fff; }
.pn-auth-demo-actions i em { position:absolute;right:-2px;top:-3px;min-width:12px;height:12px;padding:0 2px;border-radius:99px;background:#fff;color:#6354dc;font-size:5px;font-weight:900;display:grid;place-items:center;font-style:normal; }

.pn-auth-demo-modebar {
    flex:0 0 47px;min-height:47px;margin:0;padding:5px 7px;display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;
    border-bottom:1px solid var(--pn-auth-line);background:rgba(255,255,255,.97);position:relative;z-index:18;
}
.pn-auth-demo-mode-label { display:grid;gap:1px;text-align:left; }
.pn-auth-demo-mode-label small { color:#9993a0;font-size:4.6px;font-weight:900;letter-spacing:.07em;text-transform:uppercase; }
.pn-auth-demo-mode-label strong { font-size:7px; }
.pn-auth-demo-modes { min-width:0;padding:2px;border-radius:9px;background:#f0eff4;display:grid;grid-template-columns:repeat(3,1fr);gap:2px; }
.pn-auth-demo-modes i { min-width:0;height:29px;padding:0 4px;border-radius:7px;color:#8d8793;display:flex;align-items:center;justify-content:center;gap:3px;font-size:5px;font-weight:850;font-style:normal; }
.pn-auth-demo-modes i.is-active { color:#fff;background:var(--pn-auth-purple);box-shadow:0 5px 10px rgba(116,98,245,.22); }
.pn-auth-demo-modes .pn-icon-svg { width:8px;height:8px; }
.pn-auth-demo-modes b { font-size:4.8px;white-space:nowrap; }
.pn-auth-demo-wallet { min-width:30px;height:29px;padding:0 5px;border:1px solid rgba(17,156,146,.14);border-radius:8px;background:rgba(17,156,146,.075);color:#0f776f;display:flex;align-items:center;justify-content:center;gap:3px; }
.pn-auth-demo-wallet .pn-icon-svg { width:9px;height:9px; }
.pn-auth-demo-wallet b { font-size:6px; }

.pn-auth-demo-viewport { position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#f8f8fb; }
.pn-auth-demo-scene { position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none; }
.pn-auth-demo-profile { padding:10px;animation:pnAuthProfile var(--pn-auth-cycle) cubic-bezier(.2,.75,.2,1) infinite; }
.pn-auth-demo-nearby { background:#e9ecef;animation:pnAuthNearby var(--pn-auth-cycle) cubic-bezier(.2,.75,.2,1) infinite; }
.pn-auth-demo-notifications { z-index:8;padding:0 8px 10px;background:#fff;animation:pnAuthNotifications var(--pn-auth-cycle) cubic-bezier(.18,.82,.2,1) infinite; }
.pn-auth-demo-circles { background:#f8f8fb;animation:pnAuthCircles var(--pn-auth-cycle) cubic-bezier(.18,.82,.2,1) infinite; }

/* Profile: actual settings-card language */
.pn-auth-demo-page-head { margin:0 1px 7px;display:flex;justify-content:space-between;align-items:end;text-align:left; }
.pn-auth-demo-page-head span { display:grid;gap:1px; }
.pn-auth-demo-page-head small,.pn-auth-demo-section-label small { color:#8b8492;font-size:4.6px;font-weight:900;letter-spacing:.09em; }
.pn-auth-demo-page-head strong { font-size:12px;letter-spacing:-.035em; }
.pn-auth-demo-page-head > i { color:#8e8994;font-size:8px;font-style:normal; }
.pn-auth-demo-profile-hero { padding:8px;border:1px solid var(--pn-auth-line);border-radius:13px;background:#fff;display:flex;align-items:center;gap:8px;box-shadow:0 5px 15px rgba(28,24,40,.045); }
.pn-auth-demo-avatar { position:relative;width:37px;height:37px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#7a69f3,#515bd9);color:#fff;font-size:8px;font-weight:900; }
.pn-auth-demo-avatar i { position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6858e4;font-style:normal;box-shadow:0 3px 7px rgba(0,0,0,.12); }
.pn-auth-demo-avatar .pn-icon-svg { width:7px;height:7px; }
.pn-auth-demo-profile-hero > span:last-child { display:grid;gap:2px;text-align:left; }
.pn-auth-demo-profile-hero em { width:max-content;padding:2px 5px;border-radius:99px;background:var(--pn-auth-purple-soft);color:#6656de;font-size:4.5px;font-weight:900;font-style:normal; }
.pn-auth-demo-profile-hero strong { font-size:9px; }
.pn-auth-demo-profile-hero small { color:var(--pn-auth-muted);font-size:5px; }
.pn-auth-demo-tabs { margin:7px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px; }
.pn-auth-demo-tabs i { height:25px;border-radius:8px;color:#8b8591;display:flex;align-items:center;justify-content:center;gap:3px;font-size:4.9px;font-weight:800;font-style:normal;background:#fff;border:1px solid var(--pn-auth-line); }
.pn-auth-demo-tabs i.is-active { color:#6553df;background:var(--pn-auth-purple-soft);border-color:rgba(116,98,245,.16); }
.pn-auth-demo-tabs .pn-icon-svg { width:8px;height:8px; }
.pn-auth-demo-setting { padding:8px;border:1px solid var(--pn-auth-line);border-radius:12px;background:#fff;display:grid;grid-template-columns:27px minmax(0,1fr) 25px;gap:7px;align-items:center;text-align:left; }
.pn-auth-demo-setting.is-highlighted { border-color:rgba(116,98,245,.2);box-shadow:0 7px 18px rgba(116,98,245,.07); }
.pn-auth-demo-setting-icon { width:27px;height:27px;border-radius:9px;background:var(--pn-auth-purple-soft);color:var(--pn-auth-purple);display:grid;place-items:center; }
.pn-auth-demo-setting-icon .pn-icon-svg { width:12px;height:12px; }
.pn-auth-demo-setting > span:nth-child(2) { display:grid;gap:2px; }
.pn-auth-demo-setting strong { font-size:6.3px; }
.pn-auth-demo-setting small { color:var(--pn-auth-muted);font-size:4.6px;line-height:1.35; }
.pn-auth-demo-toggle { width:24px;height:14px;padding:2px;border-radius:99px;background:#d9d6dd;display:flex;align-items:center;font-style:normal; }
.pn-auth-demo-toggle b { width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18); }
.pn-auth-demo-toggle.is-on { justify-content:flex-end;background:var(--pn-auth-purple); }
.pn-auth-demo-section-label { margin:8px 2px 5px;display:flex;justify-content:space-between;align-items:center; }
.pn-auth-demo-section-label strong { font-size:6.3px; }
.pn-auth-demo-interest-card { min-height:50px;padding:7px;border:1px solid var(--pn-auth-line);border-radius:12px;background:#fff;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px; }
.pn-auth-demo-interest { padding:5px 7px;border-radius:99px;background:#f2f0fb;color:#6659c8;font-size:5.5px;font-weight:800;opacity:0;transform:translateY(5px) scale(.94);animation:pnAuthInterest var(--pn-auth-cycle) cubic-bezier(.2,.85,.2,1) infinite;animation-delay:calc(var(--auth-chip) * .22s); }
.pn-auth-demo-saved { margin-top:7px;padding:7px 8px;border-radius:11px;background:linear-gradient(145deg,#f0f9f7,#f5f2ff);display:flex;align-items:center;gap:7px;text-align:left;opacity:0;animation:pnAuthSaved var(--pn-auth-cycle) ease infinite; }
.pn-auth-demo-saved > i { width:23px;height:23px;border-radius:8px;background:#13a99b;color:#fff;display:grid;place-items:center;font-style:normal; }
.pn-auth-demo-saved .pn-icon-svg { width:10px;height:10px; }
.pn-auth-demo-saved > span { display:grid;gap:1px; }
.pn-auth-demo-saved strong { font-size:6px; }
.pn-auth-demo-saved small { color:var(--pn-auth-muted);font-size:4.7px; }

/* Nearby: actual map/control/card language */
.pn-auth-demo-map { position:absolute;inset:0 0 66px;overflow:hidden;background:linear-gradient(145deg,#e9efe9,#e8ebf1 54%,#f0ece8); }
.pn-auth-demo-map::before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);background-size:46px 46px;opacity:.28; }
.pn-auth-demo-road { position:absolute;height:13px;border-radius:99px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(208,213,220,.65);transform-origin:left center; }
.pn-auth-demo-road::after { content:"";position:absolute;inset:5px 0 auto;height:1px;background:rgba(184,190,199,.5); }
.pn-auth-demo-road.road-a { width:150%;left:-25%;top:33%;transform:rotate(22deg); }
.pn-auth-demo-road.road-b { width:130%;left:-10%;top:70%;transform:rotate(-28deg); }
.pn-auth-demo-road.road-c { width:110%;left:12%;top:49%;transform:rotate(-4deg); }
.pn-auth-demo-road.road-d { width:90%;left:44%;top:9%;transform:rotate(65deg); }
.pn-auth-demo-river { position:absolute;width:150%;height:48px;left:-25%;top:58%;border-radius:50%;border-top:18px solid rgba(99,173,201,.16);transform:rotate(-9deg); }
.pn-auth-demo-radius { position:absolute;left:50%;top:56%;width:178px;height:178px;transform:translate(-50%,-50%);border:1px solid rgba(116,98,245,.34);border-radius:50%;background:rgba(116,98,245,.06); }
.pn-auth-demo-radius i { position:absolute;inset:-1px;border:1px solid rgba(116,98,245,.38);border-radius:50%;animation:pnAuthRadar 2.8s ease-out infinite; }
.pn-auth-demo-you { position:absolute;left:50%;top:56%;width:38px;height:38px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#7665f2,#515bd8);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(75,67,166,.24);font-size:7px;font-weight:900; }
.pn-auth-demo-you > i { position:absolute;right:-5px;bottom:-4px;width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:var(--pn-auth-purple);display:grid;place-items:center;font-style:normal; }
.pn-auth-demo-you .pn-icon-svg { width:8px;height:8px; }
.pn-auth-demo-circle-pin { position:absolute;min-width:70px;padding:5px 7px;border:1px solid rgba(255,255,255,.86);border-radius:10px;background:rgba(255,255,255,.94);box-shadow:0 7px 16px rgba(31,31,45,.12);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:5px;text-align:left;font-size:9px;opacity:0;transform:scale(.75) translateY(8px); }
.pn-auth-demo-circle-pin > b { font-size:5.4px;align-self:end;white-space:nowrap; }
.pn-auth-demo-circle-pin > small { grid-column:2;color:#6d5ee4;font-size:4.4px;font-weight:850; }
.pn-auth-demo-circle-pin.auth-hike { left:12%;top:23%;animation:pnAuthPinHike var(--pn-auth-cycle) cubic-bezier(.2,.9,.2,1) infinite; }
.pn-auth-demo-circle-pin.auth-coffee { right:4%;top:45%;animation:pnAuthPinCoffee var(--pn-auth-cycle) cubic-bezier(.2,.9,.2,1) infinite; }
.pn-auth-demo-circle-pin.auth-photo { right:13%;top:10%;animation:pnAuthPinPhoto var(--pn-auth-cycle) cubic-bezier(.2,.9,.2,1) infinite; }
.pn-auth-demo-radius-copy { position:absolute;left:8px;top:8px;padding:6px 8px;border:1px solid rgba(255,255,255,.72);border-radius:10px;background:rgba(255,255,255,.91);display:grid;gap:1px;text-align:left;box-shadow:0 5px 14px rgba(30,32,44,.07); }
.pn-auth-demo-radius-copy b { font-size:5.7px; }
.pn-auth-demo-radius-copy small { color:#837d88;font-size:4.5px; }
.pn-auth-demo-map-controls { position:absolute;right:7px;bottom:7px;display:grid;gap:4px; }
.pn-auth-demo-map-controls i { width:28px;height:28px;border:1px solid rgba(255,255,255,.75);border-radius:9px;background:rgba(255,255,255,.94);color:#595560;display:grid;place-items:center;box-shadow:0 5px 12px rgba(31,29,40,.09);font-style:normal; }
.pn-auth-demo-map-controls i.is-primary { background:var(--pn-auth-purple);color:#fff;border-color:transparent; }
.pn-auth-demo-map-controls .pn-icon-svg { width:12px;height:12px; }
.pn-auth-demo-nearby-card { position:absolute;left:7px;right:7px;bottom:7px;height:55px;padding:7px;border:1px solid var(--pn-auth-line);border-radius:13px;background:#fff;display:grid;grid-template-columns:36px 1fr auto;gap:7px;align-items:center;box-shadow:0 8px 22px rgba(29,26,38,.10);text-align:left; }
.pn-auth-demo-person-avatar { width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#75d8d0,#25aa9f);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900; }
.pn-auth-demo-nearby-card > span:nth-child(2) { min-width:0;display:grid;gap:1px; }
.pn-auth-demo-nearby-card small { color:#6e5ee7;font-size:4.3px;font-weight:900;letter-spacing:.06em; }
.pn-auth-demo-nearby-card strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:6.5px; }
.pn-auth-demo-nearby-card em { color:#8a8590;font-size:4.5px;font-style:normal; }
.pn-auth-demo-nearby-card button { min-width:45px;height:27px;border:0;border-radius:9px;background:var(--pn-auth-purple);color:#fff;font-size:5.2px;font-weight:900; }

/* Notifications: uses real notification-center geometry */
.pn-auth-demo-notifications { box-shadow:0 -18px 45px rgba(36,29,47,.15); }
.pn-auth-demo-notification-head { height:49px;padding:8px 2px 6px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--pn-auth-line); }
.pn-auth-demo-notification-head > span { display:flex;align-items:center;gap:7px; }
.pn-auth-demo-notification-head > span > i { width:28px;height:28px;border-radius:9px;background:var(--pn-auth-purple-soft);color:var(--pn-auth-purple);display:grid;place-items:center;font-style:normal; }
.pn-auth-demo-notification-head .pn-icon-svg { width:12px;height:12px; }
.pn-auth-demo-notification-head b { display:grid;gap:1px;text-align:left; }
.pn-auth-demo-notification-head small { color:#8b8492;font-size:4.5px;letter-spacing:.08em; }
.pn-auth-demo-notification-head strong { font-size:9px; }
.pn-auth-demo-notification-head > em { width:24px;height:24px;border-radius:8px;background:#f5f4f7;display:grid;place-items:center;color:#857e8a;font-size:12px;font-style:normal; }
.pn-auth-demo-notification-tabs { margin:6px 0;padding:2px;border-radius:9px;background:#f1f0f4;display:grid;grid-template-columns:repeat(4,1fr);gap:2px; }
.pn-auth-demo-notification-tabs i { padding:5px 2px;border-radius:7px;color:#8a8490;font-size:4.8px;font-weight:850;font-style:normal;text-align:center; }
.pn-auth-demo-notification-tabs i.is-active { background:#fff;color:#5e53d9;box-shadow:0 3px 8px rgba(35,30,44,.08); }
.pn-auth-demo-notification-item { width:100%;min-height:73px;padding:9px 7px;border:0;border-radius:13px;background:rgba(116,98,245,.065);display:grid;grid-template-columns:42px minmax(0,1fr) 8px;gap:8px;align-items:center;text-align:left; }
.pn-auth-demo-notification-avatar { position:relative;width:41px;height:41px;border-radius:13px;background:#f3f0e9;display:grid;place-items:center;font-size:18px; }
.pn-auth-demo-notification-avatar i { position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:#6e5ee8;color:#fff;display:grid;place-items:center;font-style:normal; }
.pn-auth-demo-notification-avatar .pn-icon-svg { width:8px;height:8px; }
.pn-auth-demo-notification-item > span:nth-child(2) { min-width:0;display:grid;gap:2px; }
.pn-auth-demo-notification-item small { color:#6c5ddd;font-size:4.3px;font-weight:900;letter-spacing:.05em; }
.pn-auth-demo-notification-item strong { font-size:6.6px;line-height:1.25; }
.pn-auth-demo-notification-item em { color:#837e89;font-size:5px;line-height:1.35;font-style:normal; }
.pn-auth-demo-notification-item > b { color:#958e9a;font-size:12px; }
.pn-auth-demo-notification-context { margin-top:7px;padding:8px;border:1px solid var(--pn-auth-line);border-radius:12px;display:flex;align-items:center;gap:7px;text-align:left; }
.pn-auth-demo-notification-context > i { width:27px;height:27px;border-radius:9px;background:#eef0ff;color:#665be0;display:grid;place-items:center;font-style:normal; }
.pn-auth-demo-notification-context .pn-icon-svg { width:12px;height:12px; }
.pn-auth-demo-notification-context > span { display:grid;gap:2px; }
.pn-auth-demo-notification-context strong { font-size:6px; }
.pn-auth-demo-notification-context small { color:#8a8490;font-size:4.6px; }

/* Circles: mirrors the real reference view/card/detail */
.pn-auth-demo-circles-library { position:absolute;inset:0;padding:9px;opacity:1;animation:pnAuthCircleLibrary var(--pn-auth-cycle) ease infinite; }
.pn-auth-demo-circle-title { display:flex;justify-content:space-between;align-items:center;text-align:left; }
.pn-auth-demo-circle-title span { display:grid;gap:1px; }
.pn-auth-demo-circle-title small { color:#8b8492;font-size:4.5px;font-weight:900;letter-spacing:.08em; }
.pn-auth-demo-circle-title strong { font-size:12px;letter-spacing:-.035em; }
.pn-auth-demo-circle-title > i { width:26px;height:26px;border-radius:9px;background:var(--pn-auth-purple);color:#fff;display:grid;place-items:center;font-size:13px;font-style:normal;box-shadow:0 7px 15px rgba(116,98,245,.22); }
.pn-auth-demo-search { height:29px;margin:7px 0;padding:0 9px;border:1px solid var(--pn-auth-line);border-radius:10px;background:#fff;color:#98929d;display:flex;align-items:center;gap:5px;font-size:9px; }
.pn-auth-demo-search span { font-size:5.5px; }
.pn-auth-demo-category-chips { margin-bottom:7px;display:flex;gap:4px;overflow:hidden; }
.pn-auth-demo-category-chips i { padding:5px 7px;border:1px solid var(--pn-auth-line);border-radius:99px;background:#fff;color:#857e8b;font-size:4.6px;font-weight:800;font-style:normal;white-space:nowrap; }
.pn-auth-demo-category-chips i.is-active { border-color:rgba(116,98,245,.17);background:var(--pn-auth-purple-soft);color:#6556da; }
.pn-auth-demo-real-circle-card { overflow:hidden;border:1px solid var(--pn-auth-line);border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(28,24,40,.055); }
.pn-auth-demo-circle-cover { position:relative;height:74px;background:linear-gradient(145deg,#f0aa69,#536c55 58%,#263e46);overflow:hidden; }
.pn-auth-demo-circle-cover::before { content:"";position:absolute;width:130px;height:130px;right:-30px;top:-70px;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 27px rgba(255,255,255,.05); }
.pn-auth-demo-circle-cover > span { position:absolute;left:12px;bottom:9px;font-size:25px; }
.pn-auth-demo-circle-cover > i { position:absolute;right:8px;top:8px;padding:4px 6px;border-radius:99px;background:rgba(16,28,35,.36);color:#fff;font-size:4.2px;font-weight:900;letter-spacing:.06em;font-style:normal; }
.pn-auth-demo-circle-copy { padding:9px;text-align:left; }
.pn-auth-demo-circle-copy > small { color:#6f61df;font-size:4.3px;font-weight:900;letter-spacing:.06em; }
.pn-auth-demo-circle-copy > strong { display:block;margin:3px 0;font-size:9px; }
.pn-auth-demo-circle-copy > p { margin:0;color:#817b87;font-size:5px;line-height:1.4; }
.pn-auth-demo-circle-copy > span { margin:6px 0;display:flex;gap:3px; }
.pn-auth-demo-circle-copy > span i,.pn-auth-demo-detail-tags i { padding:3px 5px;border-radius:99px;background:#f3f4f7;color:#6e6973;font-size:4.3px;font-weight:750;font-style:normal; }
.pn-auth-demo-circle-copy footer { padding-top:6px;border-top:1px solid var(--pn-auth-line);display:flex;justify-content:space-between;align-items:center; }
.pn-auth-demo-circle-copy footer b { color:#7d7782;font-size:4.8px;display:flex;align-items:center;gap:3px; }
.pn-auth-demo-circle-copy footer .pn-icon-svg { width:8px;height:8px; }
.pn-auth-demo-circle-copy footer em { color:#6557de;font-size:5px;font-weight:900;font-style:normal; }

.pn-auth-demo-circle-detail { position:absolute;inset:0;background:#fff;opacity:0;transform:translateX(18%);animation:pnAuthCircleDetail var(--pn-auth-cycle) cubic-bezier(.18,.82,.2,1) infinite; }
.pn-auth-demo-detail-cover { position:relative;height:105px;overflow:hidden;background:linear-gradient(150deg,#f0aa69,#536c55 58%,#263e46); }
.pn-auth-demo-detail-cover::before { content:"";position:absolute;width:170px;height:170px;right:-45px;top:-100px;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 36px rgba(255,255,255,.05); }
.pn-auth-demo-detail-cover > span { position:absolute;left:9px;top:9px;width:25px;height:25px;border-radius:50%;background:rgba(15,22,30,.28);color:#fff;display:grid;place-items:center;font-size:13px; }
.pn-auth-demo-detail-cover > i { position:absolute;right:9px;top:9px;padding:4px 6px;border-radius:99px;background:rgba(15,22,30,.3);color:#fff;font-size:4.3px;font-weight:900;font-style:normal; }
.pn-auth-demo-detail-cover > b { position:absolute;left:14px;bottom:8px;font-size:29px; }
.pn-auth-demo-detail-body { padding:10px;text-align:left; }
.pn-auth-demo-detail-body > small { color:#6c5edf;font-size:4.5px;font-weight:900;letter-spacing:.06em; }
.pn-auth-demo-detail-body h3 { margin:3px 0 4px;font-size:14px;letter-spacing:-.04em; }
.pn-auth-demo-detail-body > p { margin:0;color:#827c87;font-size:5.3px;line-height:1.42; }
.pn-auth-demo-detail-tags { margin:7px 0;display:flex;gap:4px; }
.pn-auth-demo-members { height:31px;padding:5px 7px;border:1px solid var(--pn-auth-line);border-radius:10px;background:#faf9fb;display:flex;align-items:center; }
.pn-auth-demo-members > span { width:19px;height:19px;margin-left:-3px;border:2px solid #fff;border-radius:50%;background:#22ad9f;color:#fff;display:grid;place-items:center;font-size:4.5px;font-weight:900; }
.pn-auth-demo-members > span:nth-child(2){background:#ef904e}.pn-auth-demo-members > span:nth-child(3){background:#7b64e6}
.pn-auth-demo-members > b { margin-left:4px;color:#78727d;font-size:4.8px; }
.pn-auth-demo-members > em { margin-left:auto;color:#5d51d5;font-size:4.6px;font-weight:850;font-style:normal; }
.pn-auth-demo-chat-row { margin-top:6px;padding:7px;border:1px solid var(--pn-auth-line);border-radius:10px;background:#fff;display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:center; }
.pn-auth-demo-chat-row > span { width:26px;height:26px;border-radius:9px;background:#7a64e7;color:#fff;display:grid;place-items:center;font-size:6px;font-weight:900; }
.pn-auth-demo-chat-row p { margin:0;display:grid;gap:2px; }
.pn-auth-demo-chat-row strong { font-size:5.6px; }
.pn-auth-demo-chat-row small { color:#77717c;font-size:4.7px;line-height:1.35; }
.pn-auth-demo-detail-body > button { width:100%;height:31px;margin-top:7px;border:0;border-radius:10px;background:linear-gradient(145deg,#7462f5,#5b60e4);color:#fff;display:flex;align-items:center;justify-content:center;gap:5px;font-size:5.7px;font-weight:900;box-shadow:0 8px 16px rgba(105,87,224,.22); }
.pn-auth-demo-detail-body > button .pn-icon-svg { width:9px;height:9px; }

/* exact app-style five-tab nav; active state follows the animated view */
.pn-auth-demo-bottom-nav { flex:0 0 55px;min-height:55px;padding:5px 8px 4px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:rgba(255,255,255,.98);box-shadow:0 -8px 24px rgba(31,24,43,.08);position:relative;z-index:22; }
.pn-auth-demo-bottom-nav > span { height:45px;color:#8b8594;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:5px;font-weight:750; }
.pn-auth-demo-bottom-nav .pn-icon-svg { width:14px;height:14px; }
.pn-auth-demo-bottom-nav > span small { font-size:4.3px; }
.pn-auth-demo-bottom-nav .pn-auth-nav-center { width:42px;height:42px;margin:-17px auto 1px;border-radius:50%;background:linear-gradient(145deg,#7462f5,#6269ed);color:#fff;box-shadow:0 10px 22px rgba(102,89,223,.3); }
.pn-auth-demo-bottom-nav .pn-auth-nav-center .pn-icon-svg { width:18px;height:18px; }
.pn-auth-nav-profile { animation:pnAuthNavProfile var(--pn-auth-cycle) linear infinite; }
.pn-auth-nav-nearby { animation:pnAuthNavNearby var(--pn-auth-cycle) linear infinite; }
.pn-auth-nav-circles { animation:pnAuthNavCircles var(--pn-auth-cycle) linear infinite; }

/* timing */
@keyframes pnAuthProfile { 0%,15.5%{opacity:1;transform:translateX(0)}18%{opacity:0;transform:translateX(-9%)}18.1%,100%{opacity:0} }
@keyframes pnAuthNearby { 0%,16%{opacity:0;transform:translateX(10%)}19%,45%{opacity:1;transform:translateX(0)}47.5%,100%{opacity:0;transform:translateX(-5%)} }
@keyframes pnAuthNotifications { 0%,44%{opacity:0;transform:translateY(18%)}47%,59%{opacity:1;transform:translateY(0)}61%,100%{opacity:0;transform:translateY(8%)} }
@keyframes pnAuthCircles { 0%,58.5%{opacity:0;transform:translateX(8%)}61.5%,100%{opacity:1;transform:translateX(0)} }
@keyframes pnAuthCircleLibrary { 0%,73.8%{opacity:1;transform:translateX(0)}78.3%{opacity:0;transform:translateX(-8%)}78.4%,100%{opacity:0} }
@keyframes pnAuthCircleDetail { 0%,74%{opacity:0;transform:translateX(18%)}78.6%,100%{opacity:1;transform:translateX(0)} }
@keyframes pnAuthInterest { 0%,2%{opacity:0;transform:translateY(5px) scale(.94)}5%,15.5%{opacity:1;transform:none}18%,100%{opacity:0} }
@keyframes pnAuthSaved { 0%,10%{opacity:0;transform:translateY(5px)}12%,15.8%{opacity:1;transform:none}18%,100%{opacity:0} }
@keyframes pnAuthPinHike { 0%,23%{opacity:0;transform:scale(.72) translateY(8px)}26%,45%{opacity:1;transform:none}47%,100%{opacity:0} }
@keyframes pnAuthPinCoffee { 0%,28%{opacity:0;transform:scale(.72) translateY(8px)}31%,45%{opacity:1;transform:none}47%,100%{opacity:0} }
@keyframes pnAuthPinPhoto { 0%,33%{opacity:0;transform:scale(.72) translateY(8px)}36%,45%{opacity:1;transform:none}47%,100%{opacity:0} }
@keyframes pnAuthNavProfile { 0%,17%{color:#6553df}18%,100%{color:#8b8594} }
@keyframes pnAuthNavNearby { 0%,17%{color:#8b8594}19%,58%{color:#6553df}60%,100%{color:#8b8594} }
@keyframes pnAuthNavCircles { 0%,59%{color:#8b8594}62%,100%{color:#6553df} }
@keyframes pnAuthRadar { 0%{transform:scale(.72);opacity:.6}75%,100%{transform:scale(1.2);opacity:0} }

/* Pausing the landing slide pauses the complete authentic demo too. */
.pn-guided-device:not(.is-story-playing) .pn-authentic-demo *,
.pn-guided-device:not(.is-story-playing) .pn-authentic-demo *::before,
.pn-guided-device:not(.is-story-playing) .pn-authentic-demo *::after,
.pn-landing-slide:not(.is-active) .pn-authentic-demo *,
.pn-landing-slide:not(.is-active) .pn-authentic-demo *::before,
.pn-landing-slide:not(.is-active) .pn-authentic-demo *::after { animation-play-state:paused !important; }

/* Phone chassis has a shorter internal viewport on the stacked hero. */
@media (max-width:760px) {
    .pn-auth-demo-header { flex-basis:41px;min-height:41px;padding:5px 7px; }
    .pn-auth-demo-brand .pn-brand-mark { width:22px;height:22px;border-radius:7px; }
    .pn-auth-demo-brand .pn-brand-mark .pn-icon-svg { width:11px;height:11px; }
    .pn-auth-demo-brand strong { font-size:8px; }.pn-auth-demo-brand small{font-size:4px}
    .pn-auth-demo-actions{gap:3px}.pn-auth-demo-actions>i{width:21px;height:21px;border-radius:7px}.pn-auth-demo-actions .pn-icon-svg{width:10px;height:10px}.pn-auth-demo-actions i em{transform:scale(.78);transform-origin:right top}
    .pn-auth-demo-modebar { flex-basis:36px;min-height:36px;padding:4px 5px;gap:4px; }
    .pn-auth-demo-mode-label small{font-size:3.5px}.pn-auth-demo-mode-label strong{font-size:5.2px}
    .pn-auth-demo-modes i{height:22px;padding-inline:2px}.pn-auth-demo-modes b{font-size:3.6px}.pn-auth-demo-modes .pn-icon-svg{width:6px;height:6px}.pn-auth-demo-wallet{min-width:23px;height:22px}.pn-auth-demo-wallet b{font-size:4.5px}.pn-auth-demo-wallet .pn-icon-svg{width:7px;height:7px}
    .pn-auth-demo-bottom-nav { flex-basis:43px;min-height:43px;padding:4px 6px 3px; }
    .pn-auth-demo-bottom-nav>span{height:35px}.pn-auth-demo-bottom-nav .pn-icon-svg{width:11px;height:11px}.pn-auth-demo-bottom-nav>span small{font-size:3.4px}.pn-auth-demo-bottom-nav .pn-auth-nav-center{width:33px;height:33px;margin-top:-13px}.pn-auth-demo-bottom-nav .pn-auth-nav-center .pn-icon-svg{width:14px;height:14px}
    .pn-auth-demo-profile { padding:6px; }
    .pn-auth-demo-page-head{margin-bottom:4px}.pn-auth-demo-page-head strong{font-size:9px}.pn-auth-demo-page-head small{font-size:3.5px}
    .pn-auth-demo-profile-hero{padding:5px;border-radius:9px;gap:5px}.pn-auth-demo-avatar{width:28px;height:28px;border-radius:9px;font-size:6px}.pn-auth-demo-avatar i{width:11px;height:11px}.pn-auth-demo-profile-hero em{font-size:3.4px}.pn-auth-demo-profile-hero strong{font-size:6.7px}.pn-auth-demo-profile-hero small{font-size:3.7px}
    .pn-auth-demo-tabs{margin:4px 0;gap:2px}.pn-auth-demo-tabs i{height:19px;border-radius:6px;font-size:3.6px}.pn-auth-demo-tabs .pn-icon-svg{width:6px;height:6px}
    .pn-auth-demo-setting{padding:5px;border-radius:8px;grid-template-columns:21px 1fr 20px;gap:4px}.pn-auth-demo-setting-icon{width:21px;height:21px;border-radius:7px}.pn-auth-demo-setting-icon .pn-icon-svg{width:9px;height:9px}.pn-auth-demo-setting strong{font-size:4.7px}.pn-auth-demo-setting small{font-size:3.4px}.pn-auth-demo-toggle{width:19px;height:11px}.pn-auth-demo-toggle b{width:7px;height:7px}
    .pn-auth-demo-section-label{margin:5px 1px 3px}.pn-auth-demo-section-label strong{font-size:4.8px}.pn-auth-demo-section-label small{font-size:3.4px}.pn-auth-demo-interest-card{min-height:36px;padding:5px;border-radius:8px;gap:3px}.pn-auth-demo-interest{padding:3px 5px;font-size:4px}.pn-auth-demo-saved{margin-top:4px;padding:4px 5px;border-radius:8px;gap:5px}.pn-auth-demo-saved>i{width:18px;height:18px;border-radius:6px}.pn-auth-demo-saved strong{font-size:4.5px}.pn-auth-demo-saved small{font-size:3.4px}
    .pn-auth-demo-map{inset:0 0 49px}.pn-auth-demo-radius{width:126px;height:126px}.pn-auth-demo-you{width:29px;height:29px}.pn-auth-demo-circle-pin{min-width:53px;padding:3px 5px;border-radius:7px;font-size:6px}.pn-auth-demo-circle-pin>b{font-size:4px}.pn-auth-demo-circle-pin>small{font-size:3.2px}.pn-auth-demo-radius-copy{left:5px;top:5px;padding:4px 5px;border-radius:7px}.pn-auth-demo-radius-copy b{font-size:4.2px}.pn-auth-demo-radius-copy small{font-size:3.3px}.pn-auth-demo-map-controls{right:5px;bottom:5px}.pn-auth-demo-map-controls i{width:21px;height:21px;border-radius:7px}.pn-auth-demo-nearby-card{left:5px;right:5px;bottom:5px;height:40px;padding:4px;border-radius:9px;grid-template-columns:27px 1fr auto;gap:4px}.pn-auth-demo-person-avatar{width:27px;height:27px;border-radius:8px;font-size:6px}.pn-auth-demo-nearby-card small{font-size:3px}.pn-auth-demo-nearby-card strong{font-size:4.8px}.pn-auth-demo-nearby-card em{font-size:3.3px}.pn-auth-demo-nearby-card button{min-width:34px;height:21px;border-radius:7px;font-size:3.8px}
    .pn-auth-demo-notifications{padding-inline:5px}.pn-auth-demo-notification-head{height:37px;padding:5px 1px 4px}.pn-auth-demo-notification-head>span>i{width:21px;height:21px;border-radius:7px}.pn-auth-demo-notification-head small{font-size:3.3px}.pn-auth-demo-notification-head strong{font-size:6.7px}.pn-auth-demo-notification-head>em{width:18px;height:18px}.pn-auth-demo-notification-tabs{margin:4px 0}.pn-auth-demo-notification-tabs i{padding:3px 1px;font-size:3.5px}.pn-auth-demo-notification-item{min-height:54px;padding:6px 5px;border-radius:9px;grid-template-columns:31px 1fr 6px;gap:6px}.pn-auth-demo-notification-avatar{width:31px;height:31px;border-radius:9px;font-size:13px}.pn-auth-demo-notification-avatar i{width:14px;height:14px}.pn-auth-demo-notification-item small{font-size:3.1px}.pn-auth-demo-notification-item strong{font-size:4.8px}.pn-auth-demo-notification-item em{font-size:3.6px}.pn-auth-demo-notification-context{margin-top:5px;padding:5px;border-radius:8px;gap:5px}.pn-auth-demo-notification-context>i{width:21px;height:21px}.pn-auth-demo-notification-context strong{font-size:4.5px}.pn-auth-demo-notification-context small{font-size:3.4px}
    .pn-auth-demo-circles-library{padding:6px}.pn-auth-demo-circle-title small{font-size:3.3px}.pn-auth-demo-circle-title strong{font-size:9px}.pn-auth-demo-circle-title>i{width:20px;height:20px;border-radius:7px;font-size:10px}.pn-auth-demo-search{height:22px;margin:4px 0;padding-inline:6px;border-radius:7px}.pn-auth-demo-search span{font-size:4px}.pn-auth-demo-category-chips{margin-bottom:4px;gap:3px}.pn-auth-demo-category-chips i{padding:3px 5px;font-size:3.4px}.pn-auth-demo-real-circle-card{border-radius:10px}.pn-auth-demo-circle-cover{height:53px}.pn-auth-demo-circle-cover>span{left:9px;bottom:6px;font-size:18px}.pn-auth-demo-circle-cover>i{right:6px;top:6px;font-size:3.1px}.pn-auth-demo-circle-copy{padding:6px}.pn-auth-demo-circle-copy>small{font-size:3.1px}.pn-auth-demo-circle-copy>strong{font-size:6.7px}.pn-auth-demo-circle-copy>p{font-size:3.7px}.pn-auth-demo-circle-copy>span{margin:4px 0}.pn-auth-demo-circle-copy>span i{padding:2px 4px;font-size:3.1px}.pn-auth-demo-circle-copy footer{padding-top:4px}.pn-auth-demo-circle-copy footer b,.pn-auth-demo-circle-copy footer em{font-size:3.5px}
    .pn-auth-demo-detail-cover{height:76px}.pn-auth-demo-detail-cover>span{left:6px;top:6px;width:19px;height:19px;font-size:10px}.pn-auth-demo-detail-cover>i{right:6px;top:6px;font-size:3.1px}.pn-auth-demo-detail-cover>b{left:10px;bottom:6px;font-size:21px}.pn-auth-demo-detail-body{padding:7px}.pn-auth-demo-detail-body>small{font-size:3.2px}.pn-auth-demo-detail-body h3{font-size:10px}.pn-auth-demo-detail-body>p{font-size:3.8px}.pn-auth-demo-detail-tags{margin:4px 0}.pn-auth-demo-detail-tags i{padding:2px 4px;font-size:3px}.pn-auth-demo-members{height:23px;padding:3px 5px;border-radius:7px}.pn-auth-demo-members>span{width:15px;height:15px;font-size:3px}.pn-auth-demo-members>b,.pn-auth-demo-members>em{font-size:3.3px}.pn-auth-demo-chat-row{margin-top:4px;padding:4px;border-radius:7px;grid-template-columns:20px 1fr;gap:4px}.pn-auth-demo-chat-row>span{width:20px;height:20px;border-radius:6px;font-size:4px}.pn-auth-demo-chat-row strong{font-size:4px}.pn-auth-demo-chat-row small{font-size:3.3px}.pn-auth-demo-detail-body>button{height:23px;margin-top:4px;border-radius:7px;font-size:4.2px}
}


/* ==========================================================================
   Nudjee 2.15.57 — authentic hero refinement
   - Speed the real-app walkthrough up slightly while preserving a ~6 second
     final hold.
   - Visually cycle Friends, Business and Romance so the signed-in chrome
     demonstrates mode-aware top/bottom navigation.
   - Improve gradient richness, sizing and micro-alignment for readability.
   ========================================================================== */
.pn-authentic-demo {
    --pn-auth-cycle: 26s;
    --pn-auth-friends-1: #6b67f4;
    --pn-auth-friends-2: #4d78f6;
    --pn-auth-business-1: #0fa390;
    --pn-auth-business-2: #1ac3a8;
    --pn-auth-romance-1: #ff5f9d;
    --pn-auth-romance-2: #ff7f8d;
}
.pn-auth-demo-header {
    padding: 8px 12px;
    border-bottom-color: rgba(34,29,50,.08);
    overflow: hidden;
    animation: pnAuthModeHeader var(--pn-auth-cycle) linear infinite;
}
.pn-auth-demo-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 42%), radial-gradient(circle at 84% 18%, rgba(255,255,255,.24), transparent 30%);
    pointer-events: none;
}
.pn-auth-demo-header::after {
    content: "";
    position: absolute;
    width: 154px;
    height: 112px;
    right: -34px;
    top: -32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
    opacity: .72;
    pointer-events: none;
    animation: pnAuthModeGlow var(--pn-auth-cycle) linear infinite;
}
.pn-auth-demo-brand, .pn-auth-demo-actions { position: relative; z-index: 1; }
.pn-auth-demo-brand { gap: 8px; }
.pn-auth-demo-brand .pn-brand-mark {
    width: 31px;
    height: 31px;
    border-radius: 11px;
    background: rgba(255,255,255,.19);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 6px 14px rgba(0,0,0,.09);
}
.pn-auth-demo-brand .pn-brand-mark .pn-icon-svg { width: 16px; height: 16px; }
.pn-auth-demo-brand strong { font-size: 11.8px; }
.pn-auth-demo-brand small { font-size: 6.05px; }
.pn-auth-demo-actions { gap: 6px; }
.pn-auth-demo-actions > i {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.13);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.pn-auth-demo-actions .pn-icon-svg { width: 13.5px; height: 13.5px; }
.pn-auth-demo-actions i em { min-width: 13px; height: 13px; font-size: 5.2px; }

.pn-auth-demo-modebar {
    grid-template-columns: minmax(68px, auto) 1fr auto;
    gap: 7px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,246,250,.98));
}
.pn-auth-demo-mode-label small { font-size: 4.8px; letter-spacing: .08em; }
.pn-auth-demo-mode-label strong {
    position: relative;
    display: block;
    min-width: 68px;
    height: 10px;
    font-size: 7.6px;
    line-height: 1;
    overflow: hidden;
}
.pn-auth-demo-mode-label strong span {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(6px);
    animation-duration: var(--pn-auth-cycle);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.2,.78,.2,1);
}
.pn-auth-demo-mode-label strong .is-friends { animation-name: pnAuthModeWordFriends; }
.pn-auth-demo-mode-label strong .is-business { animation-name: pnAuthModeWordBusiness; }
.pn-auth-demo-mode-label strong .is-romance { animation-name: pnAuthModeWordRomance; }

.pn-auth-demo-modes {
    padding: 2px;
    gap: 2px;
    border-radius: 10px;
    background: linear-gradient(180deg, #efedf4, #f4f3f8);
}
.pn-auth-demo-modes .pn-auth-mode-chip {
    position: relative;
    min-width: 0;
    height: 30px;
    padding: 0 5px;
    border-radius: 8px;
    color: #8f8894;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
    isolation: isolate;
}
.pn-auth-demo-modes .pn-auth-mode-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    z-index: 0;
}
.pn-auth-demo-modes .pn-auth-mode-chip > * { position: relative; z-index: 1; }
.pn-auth-demo-modes .pn-auth-mode-chip .pn-icon-svg { width: 8.5px; height: 8.5px; }
.pn-auth-demo-modes .pn-auth-mode-chip b { font-size: 5.15px; }
.pn-auth-demo-modes .pn-auth-mode-chip.is-friends { animation: pnAuthModeChipFriends var(--pn-auth-cycle) linear infinite; }
.pn-auth-demo-modes .pn-auth-mode-chip.is-business { animation: pnAuthModeChipBusiness var(--pn-auth-cycle) linear infinite; }
.pn-auth-demo-modes .pn-auth-mode-chip.is-romance { animation: pnAuthModeChipRomance var(--pn-auth-cycle) linear infinite; }
.pn-auth-demo-modes .pn-auth-mode-chip.is-friends::before {
    background: linear-gradient(145deg, var(--pn-auth-friends-1), var(--pn-auth-friends-2));
    animation: pnAuthModeChipFillFriends var(--pn-auth-cycle) linear infinite;
}
.pn-auth-demo-modes .pn-auth-mode-chip.is-business::before {
    background: linear-gradient(145deg, var(--pn-auth-business-1), var(--pn-auth-business-2));
    animation: pnAuthModeChipFillBusiness var(--pn-auth-cycle) linear infinite;
}
.pn-auth-demo-modes .pn-auth-mode-chip.is-romance::before {
    background: linear-gradient(145deg, var(--pn-auth-romance-1), var(--pn-auth-romance-2));
    animation: pnAuthModeChipFillRomance var(--pn-auth-cycle) linear infinite;
}
.pn-auth-demo-wallet {
    min-width: 31px;
    height: 30px;
    padding: 0 6px;
    border-radius: 9px;
    border-color: rgba(105,94,233,.14);
    background: rgba(104,92,227,.08);
    color: #6255d7;
    animation: pnAuthWalletTheme var(--pn-auth-cycle) linear infinite;
}
.pn-auth-demo-wallet .pn-icon-svg { width: 9.5px; height: 9.5px; }
.pn-auth-demo-wallet b { font-size: 6.3px; }

.pn-auth-demo-page-head { margin-bottom: 8px; }
.pn-auth-demo-page-head strong { font-size: 12.7px; }
.pn-auth-demo-profile-hero { padding: 9px; }
.pn-auth-demo-profile-hero em { font-size: 4.8px; }
.pn-auth-demo-profile-hero strong { font-size: 9.6px; }
.pn-auth-demo-profile-hero small { font-size: 5.2px; }
.pn-auth-demo-tabs i { font-size: 5.15px; }
.pn-auth-demo-setting strong, .pn-auth-demo-section-label strong { font-size: 6.55px; }
.pn-auth-demo-setting small, .pn-auth-demo-page-head small, .pn-auth-demo-section-label small { font-size: 4.8px; }
.pn-auth-demo-interest-card { min-height: 54px; }
.pn-auth-demo-interest { padding: 5px 8px; font-size: 5.75px; }
.pn-auth-demo-saved strong { font-size: 6.2px; }
.pn-auth-demo-saved small { font-size: 4.9px; line-height: 1.35; }

.pn-auth-demo-map {
    background: linear-gradient(160deg, #eef3fb 0%, #ecf8f3 44%, #f7eef9 100%);
}
.pn-auth-demo-circle-pin {
    min-width: 78px;
    padding: 6px 8px;
    border-radius: 11px;
    box-shadow: 0 10px 20px rgba(28,32,44,.12);
}
.pn-auth-demo-circle-pin > b { font-size: 6.05px; }
.pn-auth-demo-circle-pin > small { font-size: 4.9px; }
.pn-auth-demo-radius-copy b { font-size: 5.1px; }
.pn-auth-demo-radius-copy small { font-size: 4.1px; }
.pn-auth-demo-nearby-card {
    height: 50px;
    padding: 6px;
    gap: 6px;
    align-items: center;
}
.pn-auth-demo-nearby-card small { font-size: 4.25px; letter-spacing: .05em; }
.pn-auth-demo-nearby-card strong { font-size: 6.2px; line-height: 1.18; }
.pn-auth-demo-nearby-card em { font-size: 4.55px; }
.pn-auth-demo-nearby-card button {
    min-width: 44px;
    height: 26px;
    border-radius: 8px;
    font-size: 4.9px;
}

.pn-auth-demo-notification-head strong { font-size: 8.1px; }
.pn-auth-demo-notification-tabs i { font-size: 4.7px; }
.pn-auth-demo-notification-item {
    min-height: 76px;
    padding: 10px 8px;
    grid-template-columns: 42px minmax(0,1fr) 9px;
}
.pn-auth-demo-notification-item small { font-size: 4.55px; }
.pn-auth-demo-notification-item strong { font-size: 7.05px; }
.pn-auth-demo-notification-item em { font-size: 5.2px; }
.pn-auth-demo-notification-context strong { font-size: 5.4px; }
.pn-auth-demo-notification-context small { font-size: 4.5px; }

.pn-auth-demo-circle-title strong { font-size: 12.5px; }
.pn-auth-demo-search span { font-size: 5.2px; }
.pn-auth-demo-category-chips i { font-size: 4.55px; }
.pn-auth-demo-circle-cover { background: linear-gradient(135deg, rgba(27,196,168,.88), rgba(112,105,243,.92) 68%, rgba(245,95,157,.9)); }
.pn-auth-demo-circle-cover::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 28%); }
.pn-auth-demo-circle-copy > small, .pn-auth-demo-detail-body > small { font-size: 4.2px; }
.pn-auth-demo-circle-copy > strong { font-size: 8.55px; }
.pn-auth-demo-circle-copy > p { font-size: 5px; line-height: 1.36; }
.pn-auth-demo-circle-copy > span i { font-size: 4px; }
.pn-auth-demo-circle-copy footer b, .pn-auth-demo-circle-copy footer em { font-size: 4.45px; }

.pn-auth-demo-detail-cover {
    background: linear-gradient(135deg, rgba(27,196,168,.92), rgba(112,105,243,.95) 64%, rgba(245,95,157,.92));
}
.pn-auth-demo-detail-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%), radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 28%);
}
.pn-auth-demo-detail-body { padding: 10px; }
.pn-auth-demo-detail-body h3 { font-size: 12.4px; }
.pn-auth-demo-detail-body > p { font-size: 5.05px; line-height: 1.4; }
.pn-auth-demo-detail-tags i { font-size: 4.05px; }
.pn-auth-demo-members > b, .pn-auth-demo-members > em { font-size: 4.55px; }
.pn-auth-demo-chat-row strong { font-size: 4.9px; }
.pn-auth-demo-chat-row small { font-size: 4.45px; line-height: 1.32; }
.pn-auth-demo-detail-body > button {
    height: 28px;
    margin-top: 6px;
    border-radius: 9px;
    font-size: 5.2px;
    background: linear-gradient(135deg, var(--pn-auth-friends-1), var(--pn-auth-friends-2));
    box-shadow: 0 10px 22px rgba(78,104,246,.26);
}

.pn-auth-demo-bottom-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(246,245,249,.98));
}
.pn-auth-demo-bottom-nav > span {
    height: 46px;
    gap: 3px;
    font-size: 5.15px;
    transition: color .25s ease;
}
.pn-auth-demo-bottom-nav > span small { font-size: 4.5px; }
.pn-auth-demo-bottom-nav .pn-auth-nav-center {
    width: 44px;
    height: 44px;
    margin-top: -18px;
    box-shadow: 0 12px 24px rgba(102,89,223,.26);
    animation: pnAuthCenterTheme var(--pn-auth-cycle) linear infinite;
}
.pn-auth-nav-profile { animation: pnAuthNavProfile var(--pn-auth-cycle) linear infinite; }
.pn-auth-nav-nearby { animation: pnAuthNavNearby var(--pn-auth-cycle) linear infinite; }
.pn-auth-nav-circles { animation: pnAuthNavCircles var(--pn-auth-cycle) linear infinite; }
.pn-auth-nav-chats { animation: none !important; }

/* speed-up: 20s story, ~6s hold on the final detail view */
@keyframes pnAuthProfile { 0%,11.5%{opacity:1;transform:translateX(0)}14.2%{opacity:0;transform:translateX(-9%)}14.3%,100%{opacity:0} }
@keyframes pnAuthNearby { 0%,12.6%{opacity:0;transform:translateX(10%)}15.6%,40%{opacity:1;transform:translateX(0)}42.8%,100%{opacity:0;transform:translateX(-5%)} }
@keyframes pnAuthNotifications { 0%,39.4%{opacity:0;transform:translateY(18%)}42.2%,52.2%{opacity:1;transform:translateY(0)}54.6%,100%{opacity:0;transform:translateY(8%)} }
@keyframes pnAuthCircles { 0%,52.1%{opacity:0;transform:translateX(8%)}55.1%,100%{opacity:1;transform:translateX(0)} }
@keyframes pnAuthCircleLibrary { 0%,64.6%{opacity:1;transform:translateX(0)}69.6%{opacity:0;transform:translateX(-8%)}69.7%,100%{opacity:0} }
@keyframes pnAuthCircleDetail { 0%,68%{opacity:0;transform:translateX(18%)}76.9%,100%{opacity:1;transform:translateX(0)} }
@keyframes pnAuthInterest { 0%,1.5%{opacity:0;transform:translateY(5px) scale(.94)}3.5%,11.6%{opacity:1;transform:none}14.3%,100%{opacity:0} }
@keyframes pnAuthSaved { 0%,7.2%{opacity:0;transform:translateY(5px)}9.2%,11.9%{opacity:1;transform:none}14.3%,100%{opacity:0} }
@keyframes pnAuthPinHike { 0%,18.5%{opacity:0;transform:scale(.72) translateY(8px)}21.1%,39.8%{opacity:1;transform:none}42.8%,100%{opacity:0} }
@keyframes pnAuthPinCoffee { 0%,22.2%{opacity:0;transform:scale(.72) translateY(8px)}24.8%,39.8%{opacity:1;transform:none}42.8%,100%{opacity:0} }
@keyframes pnAuthPinPhoto { 0%,25.6%{opacity:0;transform:scale(.72) translateY(8px)}28.3%,39.8%{opacity:1;transform:none}42.8%,100%{opacity:0} }

@keyframes pnAuthModeHeader {
    0%,11.5%,32%,100% { background: linear-gradient(135deg, var(--pn-auth-friends-1) 0%, #6673f4 48%, var(--pn-auth-friends-2) 100%); box-shadow: 0 8px 22px rgba(85,94,232,.19); }
    12%,21.5% { background: linear-gradient(135deg, var(--pn-auth-business-1) 0%, #12b7a1 52%, var(--pn-auth-business-2) 100%); box-shadow: 0 8px 22px rgba(18,176,154,.18); }
    22%,31.5% { background: linear-gradient(135deg, var(--pn-auth-romance-1) 0%, #ff6c95 50%, var(--pn-auth-romance-2) 100%); box-shadow: 0 8px 22px rgba(255,101,154,.18); }
}
@keyframes pnAuthModeGlow {
    0%,11.5%,32%,100% { transform: scale(1) translate(0,0); opacity: .74; }
    12%,21.5% { transform: scale(1.03) translate(-4px, 2px); opacity: .8; }
    22%,31.5% { transform: scale(1.05) translate(-6px, 4px); opacity: .82; }
}
@keyframes pnAuthModeWordFriends { 0%,11.4%,32%,100% { opacity:1; transform:translateY(0);} 12%,31.9% { opacity:0; transform:translateY(6px);} }
@keyframes pnAuthModeWordBusiness { 0%,11.7%,21.4%,100% { opacity:0; transform:translateY(6px);} 12.2%,20.9% { opacity:1; transform:translateY(0);} }
@keyframes pnAuthModeWordRomance { 0%,21.7%,31.4%,100% { opacity:0; transform:translateY(6px);} 22.2%,30.9% { opacity:1; transform:translateY(0);} }
@keyframes pnAuthModeChipFriends {
    0%,11.4%,32%,100% { color:#fff; box-shadow:0 7px 15px rgba(93,105,240,.26); transform:none; }
    12%,31.9% { color:#8f8894; box-shadow:none; }
}
@keyframes pnAuthModeChipFillFriends { 0%,11.4%,32%,100% { opacity:1; } 12%,31.9% { opacity:0; } }
@keyframes pnAuthModeChipBusiness {
    0%,11.8%,21.4%,100% { color:#8f8894; box-shadow:none; }
    12.2%,20.9% { color:#fff; box-shadow:0 7px 15px rgba(22,182,157,.24); }
}
@keyframes pnAuthModeChipFillBusiness { 0%,11.8%,21.4%,100% { opacity:0; } 12.2%,20.9% { opacity:1; } }
@keyframes pnAuthModeChipRomance {
    0%,21.8%,31.4%,100% { color:#8f8894; box-shadow:none; }
    22.2%,30.9% { color:#fff; box-shadow:0 7px 15px rgba(255,101,154,.22); }
}
@keyframes pnAuthModeChipFillRomance { 0%,21.8%,31.4%,100% { opacity:0; } 22.2%,30.9% { opacity:1; } }
@keyframes pnAuthWalletTheme {
    0%,11.5%,32%,100% { border-color: rgba(106,102,244,.16); background: rgba(106,102,244,.09); color:#5f57da; }
    12%,21.5% { border-color: rgba(15,163,144,.17); background: rgba(15,163,144,.09); color:#118a7c; }
    22%,31.5% { border-color: rgba(255,95,157,.18); background: rgba(255,95,157,.09); color:#e8558b; }
}
@keyframes pnAuthCenterTheme {
    0%,11.5%,32%,100% { background: linear-gradient(145deg, var(--pn-auth-friends-1), var(--pn-auth-friends-2)); box-shadow: 0 12px 24px rgba(93,105,240,.28); }
    12%,21.5% { background: linear-gradient(145deg, var(--pn-auth-business-1), var(--pn-auth-business-2)); box-shadow: 0 12px 24px rgba(18,176,154,.24); }
    22%,31.5% { background: linear-gradient(145deg, var(--pn-auth-romance-1), var(--pn-auth-romance-2)); box-shadow: 0 12px 24px rgba(255,101,154,.22); }
}
@keyframes pnAuthNavProfile {
    0%,11.5% { color:#5d69f0; }
    12%,21.5% { color:#16af97; }
    22%,31.5% { color:#f35a94; }
    32%,100% { color:#8b8594; }
}
@keyframes pnAuthNavNearby {
    0%,15.5% { color:#8b8594; }
    15.6%,21.5% { color:#16af97; }
    22%,31.5% { color:#f35a94; }
    32%,54.5% { color:#5d69f0; }
    54.6%,100% { color:#8b8594; }
}
@keyframes pnAuthNavCircles {
    0%,54.5% { color:#8b8594; }
    55.1%,100% { color:#5d69f0; }
}

@media (max-width:760px) {
    .pn-auth-demo-header { flex-basis: 43px; min-height: 43px; padding: 5px 8px; }
    .pn-auth-demo-brand { gap: 6px; }
    .pn-auth-demo-brand .pn-brand-mark { width: 23px; height: 23px; border-radius: 8px; }
    .pn-auth-demo-brand .pn-brand-mark .pn-icon-svg { width: 11px; height: 11px; }
    .pn-auth-demo-brand strong { font-size: 8.4px; }
    .pn-auth-demo-brand small { font-size: 4.15px; }
    .pn-auth-demo-actions { gap: 4px; }
    .pn-auth-demo-actions > i { width: 22px; height: 22px; border-radius: 8px; }
    .pn-auth-demo-actions .pn-icon-svg { width: 10px; height: 10px; }

    .pn-auth-demo-modebar { flex-basis: 38px; min-height: 38px; padding: 4px 6px; gap: 5px; grid-template-columns: 60px 1fr 25px; }
    .pn-auth-demo-mode-label small { font-size: 3.75px; }
    .pn-auth-demo-mode-label strong { min-width: 58px; height: 8px; font-size: 5.8px; }
    .pn-auth-demo-modes .pn-auth-mode-chip { height: 23px; padding-inline: 2px; }
    .pn-auth-demo-modes .pn-auth-mode-chip .pn-icon-svg { width: 6.2px; height: 6.2px; }
    .pn-auth-demo-modes .pn-auth-mode-chip b { font-size: 3.9px; }
    .pn-auth-demo-wallet { min-width: 24px; height: 23px; padding: 0 4px; }
    .pn-auth-demo-wallet b { font-size: 4.8px; }
    .pn-auth-demo-wallet .pn-icon-svg { width: 7px; height: 7px; }

    .pn-auth-demo-page-head strong { font-size: 9.4px; }
    .pn-auth-demo-page-head small, .pn-auth-demo-setting small, .pn-auth-demo-section-label small { font-size: 3.85px; }
    .pn-auth-demo-profile-hero strong { font-size: 7.05px; }
    .pn-auth-demo-profile-hero small { font-size: 3.95px; }
    .pn-auth-demo-profile-hero em { font-size: 3.7px; }
    .pn-auth-demo-tabs i { font-size: 3.9px; }
    .pn-auth-demo-setting strong, .pn-auth-demo-section-label strong { font-size: 5px; }
    .pn-auth-demo-interest { font-size: 4.3px; }
    .pn-auth-demo-saved strong { font-size: 4.8px; }
    .pn-auth-demo-saved small { font-size: 3.7px; }

    .pn-auth-demo-map { inset: 0 0 50px; }
    .pn-auth-demo-circle-pin { min-width: 60px; padding: 4px 6px; }
    .pn-auth-demo-circle-pin > b { font-size: 4.45px; }
    .pn-auth-demo-circle-pin > small { font-size: 3.55px; }
    .pn-auth-demo-radius-copy b { font-size: 4.45px; }
    .pn-auth-demo-radius-copy small { font-size: 3.6px; }
    .pn-auth-demo-nearby-card { height: 43px; padding: 5px; gap: 5px; }
    .pn-auth-demo-nearby-card small { font-size: 3.45px; }
    .pn-auth-demo-nearby-card strong { font-size: 5.2px; }
    .pn-auth-demo-nearby-card em { font-size: 3.8px; }
    .pn-auth-demo-nearby-card button { min-width: 37px; height: 22px; font-size: 4.1px; }

    .pn-auth-demo-notification-head strong { font-size: 7px; }
    .pn-auth-demo-notification-head small, .pn-auth-demo-notification-tabs i { font-size: 3.7px; }
    .pn-auth-demo-notification-item { min-height: 57px; padding: 6px 5px; gap: 6px; }
    .pn-auth-demo-notification-item small { font-size: 3.5px; }
    .pn-auth-demo-notification-item strong { font-size: 5.35px; }
    .pn-auth-demo-notification-item em { font-size: 3.95px; }
    .pn-auth-demo-notification-context strong { font-size: 4.8px; }
    .pn-auth-demo-notification-context small { font-size: 3.7px; }

    .pn-auth-demo-circle-title strong { font-size: 9.6px; }
    .pn-auth-demo-search span { font-size: 4.25px; }
    .pn-auth-demo-category-chips i { font-size: 3.65px; }
    .pn-auth-demo-circle-copy > small, .pn-auth-demo-detail-body > small { font-size: 3.45px; }
    .pn-auth-demo-circle-copy > strong { font-size: 7.05px; }
    .pn-auth-demo-circle-copy > p { font-size: 4px; }
    .pn-auth-demo-circle-copy > span i { font-size: 3.25px; }
    .pn-auth-demo-circle-copy footer b, .pn-auth-demo-circle-copy footer em { font-size: 3.75px; }
    .pn-auth-demo-detail-body { padding: 8px; }
    .pn-auth-demo-detail-body h3 { font-size: 10.3px; }
    .pn-auth-demo-detail-body > p { font-size: 4.15px; }
    .pn-auth-demo-detail-tags i { font-size: 3.25px; }
    .pn-auth-demo-members > b, .pn-auth-demo-members > em { font-size: 3.6px; }
    .pn-auth-demo-chat-row strong { font-size: 4.2px; }
    .pn-auth-demo-chat-row small { font-size: 3.7px; }
    .pn-auth-demo-detail-body > button { font-size: 4.45px; }

    .pn-auth-demo-bottom-nav > span small { font-size: 3.7px; }
    .pn-auth-demo-bottom-nav .pn-auth-nav-center { width: 34px; height: 34px; }
}


/* ==========================================================================
   Nudjee 2.15.57 — restore final CTA end card
   Authentic hero now resolves on a small branded CTA card rather than ending
   on the hikers detail screen, with an intentional 5 second hold.
   ========================================================================== */
.pn-auth-demo-final {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    background: linear-gradient(180deg, #fbfbfe 0%, #f6f5fb 100%);
    animation: pnAuthFinal var(--pn-auth-cycle) cubic-bezier(.18,.82,.2,1) infinite;
}
.pn-auth-demo-final::before,
.pn-auth-demo-final::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(0px);
    pointer-events: none;
}
.pn-auth-demo-final::before {
    width: 180px;
    height: 180px;
    top: -72px;
    left: -64px;
    background: radial-gradient(circle, rgba(105, 98, 245, .12), transparent 70%);
}
.pn-auth-demo-final::after {
    width: 170px;
    height: 170px;
    right: -60px;
    bottom: -86px;
    background: radial-gradient(circle, rgba(17, 195, 167, .12), transparent 70%);
}
.pn-auth-demo-final-mark {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(109, 102, 245, .14), rgba(27,196,168,.14));
    color: #5d63eb;
    box-shadow: inset 0 0 0 1px rgba(109, 102, 245, .08), 0 16px 32px rgba(79, 88, 206, .12);
}
.pn-auth-demo-final-mark > span {
    position: absolute;
    inset: 9px;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, rgba(255,255,255,.88));
}
.pn-auth-demo-final-mark .pn-icon-svg { position: relative; z-index: 2; width: 27px; height: 27px; }
.pn-auth-demo-final-mark i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7266f2;
    opacity: .9;
}
.pn-auth-demo-final-mark .spark-one { left: -10px; top: 8px; }
.pn-auth-demo-final-mark .spark-two { right: -10px; top: 18px; background: #21baa3; }
.pn-auth-demo-final-mark .spark-three { left: 4px; bottom: -9px; background: #f36b9f; }
.pn-auth-demo-final > small {
    position: relative;
    z-index: 1;
    color: #8a8397;
    font-size: 4.9px;
    font-weight: 900;
    letter-spacing: .16em;
}
.pn-auth-demo-final h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #181c2a;
    font-size: 18px;
    line-height: 1.02;
    letter-spacing: -.045em;
}
.pn-auth-demo-final p {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 172px;
    color: #7c8393;
    font-size: 5.4px;
    line-height: 1.45;
}

@keyframes pnAuthCircles { 0%,52.1%{opacity:0;transform:translateX(8%)}55.1%,79.2%{opacity:1;transform:translateX(0)}80.5%,100%{opacity:0;transform:translateX(-4%)} }
@keyframes pnAuthCircleLibrary { 0%,64.2%{opacity:1;transform:translateX(0)}68.7%{opacity:0;transform:translateX(-8%)}68.8%,100%{opacity:0} }
@keyframes pnAuthCircleDetail { 0%,67.8%{opacity:0;transform:translateX(18%)}72.8%,79.2%{opacity:1;transform:translateX(0)}80.5%,100%{opacity:0;transform:translateX(-5%)} }
@keyframes pnAuthFinal { 0%,79.3%{opacity:0;transform:translateY(10%) scale(.98)}80.8%,100%{opacity:1;transform:translateY(0) scale(1)} }

@media (max-width:760px) {
    .pn-auth-demo-final { padding: 15px 12px 12px; gap: 5px; }
    .pn-auth-demo-final-mark { width: 48px; height: 48px; border-radius: 16px; }
    .pn-auth-demo-final-mark > span { inset: 7px; border-radius: 12px; }
    .pn-auth-demo-final-mark .pn-icon-svg { width: 21px; height: 21px; }
    .pn-auth-demo-final-mark i { width: 6px; height: 6px; }
    .pn-auth-demo-final > small { font-size: 3.8px; }
    .pn-auth-demo-final h3 { font-size: 14px; }
    .pn-auth-demo-final p { max-width: 138px; font-size: 4.15px; }
}


/* ==========================================================================
   Nudjee 2.15.57 — authentic hero map-road refinement
   Improve the Nearby animation scene so the road network reads as a real map
   instead of generic crossing lines.
   ========================================================================== */
.pn-auth-demo-map {
    background:
        radial-gradient(circle at 16% 18%, rgba(174, 216, 191, .34), transparent 17%),
        radial-gradient(circle at 82% 78%, rgba(184, 204, 238, .26), transparent 19%),
        linear-gradient(160deg, #eef3f3 0%, #edf3ef 36%, #eef1f7 100%);
}
.pn-auth-demo-map::before {
    opacity: 1;
    background:
        linear-gradient(26deg, rgba(207,214,218,.34) 0 2px, transparent 2px 44px),
        linear-gradient(116deg, rgba(207,214,218,.26) 0 2px, transparent 2px 48px),
        radial-gradient(circle at 23% 67%, rgba(180, 217, 190, .16), transparent 20%),
        radial-gradient(circle at 78% 22%, rgba(194, 214, 236, .13), transparent 18%);
    background-size: 84px 84px, 92px 92px, 100% 100%, 100% 100%;
}
.pn-auth-demo-road {
    height: var(--road-h, 16px);
    border-radius: 999px;
    background: linear-gradient(180deg, #fbfbfd 0%, #f4f5f7 100%);
    box-shadow:
        0 0 0 1px rgba(193,200,208,.92),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(212,217,223,.72),
        0 6px 14px rgba(107,116,128,.08);
    overflow: hidden;
}
.pn-auth-demo-road::before {
    content: "";
    position: absolute;
    inset: -4px -2px;
    border-radius: inherit;
    background: rgba(203, 209, 216, .22);
    z-index: -1;
}
.pn-auth-demo-road::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, rgba(196,202,210,.94) 0 10px, rgba(196,202,210,0) 10px 18px);
    opacity: .9;
}
.pn-auth-demo-road.road-a {
    --road-h: 18px;
    width: 122%;
    left: -6%;
    top: 49%;
    transform: rotate(-11deg);
}
.pn-auth-demo-road.road-b {
    --road-h: 17px;
    width: 114%;
    left: -2%;
    top: 22%;
    transform: rotate(34deg);
}
.pn-auth-demo-road.road-c {
    --road-h: 15px;
    width: 88%;
    left: 35%;
    top: 8%;
    transform: rotate(79deg);
}
.pn-auth-demo-road.road-d {
    --road-h: 14px;
    width: 62%;
    left: -9%;
    top: 72%;
    transform: rotate(12deg);
}
.pn-auth-demo-river {
    width: 165%;
    height: 64px;
    left: -30%;
    top: 53%;
    border-radius: 50%;
    border-top: 22px solid rgba(103, 165, 210, .22);
    box-shadow: 0 -1px 0 rgba(92,155,201,.11);
    transform: rotate(-10deg);
}
.pn-auth-demo-map .pn-auth-demo-radius {
    box-shadow: 0 0 0 1px rgba(104, 98, 245, .14), inset 0 0 0 1px rgba(115,108,247,.05);
}
.pn-auth-demo-map .pn-auth-demo-you {
    box-shadow: 0 10px 16px rgba(63,66,154,.16), 0 0 0 4px rgba(255,255,255,.72);
}

@media (max-width:760px) {
    .pn-auth-demo-map::before {
        background-size: 64px 64px, 72px 72px, 100% 100%, 100% 100%;
    }
    .pn-auth-demo-road::after {
        left: 7px;
        right: 7px;
        height: 1px;
        background: repeating-linear-gradient(90deg, rgba(196,202,210,.96) 0 6px, rgba(196,202,210,0) 6px 11px);
    }
    .pn-auth-demo-road.road-a { --road-h: 14px; top: 49%; }
    .pn-auth-demo-road.road-b { --road-h: 13px; top: 24%; }
    .pn-auth-demo-road.road-c { --road-h: 12px; top: 8%; }
    .pn-auth-demo-road.road-d { --road-h: 11px; top: 74%; }
    .pn-auth-demo-river {
        height: 52px;
        top: 56%;
        border-top-width: 18px;
    }
}


/* ==========================================================================
   Nudjee 2.15.63 — guided click cursor for authentic hero
   The product walkthrough now shows the exact control being clicked before
   every state/page transition. This replaces the "pages changing by magic"
   feel with a coherent interaction story.
   ========================================================================== */
.pn-auth-demo-cursor {
    position: absolute;
    z-index: 80;
    width: 18px;
    height: 22px;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate(-2px,-2px);
    transform-origin: 4px 4px;
    filter: drop-shadow(0 2px 3px rgba(17,20,31,.28));
}
.pn-auth-demo-cursor svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.pn-auth-demo-cursor svg path {
    fill: rgba(255,255,255,.98);
    stroke: #202331;
    stroke-width: 1.25;
    stroke-linejoin: round;
}
.pn-auth-demo-cursor > i {
    position: absolute;
    z-index: 1;
    left: 1px;
    top: 1px;
    width: 18px;
    height: 18px;
    margin: -7px 0 0 -7px;
    border: 1.5px solid rgba(103,98,241,.72);
    border-radius: 50%;
    background: rgba(103,98,241,.09);
    opacity: 0;
    transform: scale(.2);
}
.pn-auth-demo-cursor.is-mode {
    animation: pnAuthModeCursor var(--pn-auth-cycle) cubic-bezier(.22,.78,.2,1) infinite;
}
.pn-auth-demo-cursor.is-mode > i {
    animation: pnAuthModeCursorPulse var(--pn-auth-cycle) ease-out infinite;
}
.pn-auth-demo-cursor.is-nav {
    animation: pnAuthNavCursor var(--pn-auth-cycle) cubic-bezier(.22,.78,.2,1) infinite;
}
.pn-auth-demo-cursor.is-nav > i {
    animation: pnAuthNavCursorPulse var(--pn-auth-cycle) ease-out infinite;
}

/* Mode changes now occur immediately after the visible cursor click. */
@keyframes pnAuthModeHeader {
    0%,8.6%,24.2%,100% { background:linear-gradient(135deg,var(--pn-auth-friends-1) 0%,#6673f4 48%,var(--pn-auth-friends-2) 100%);box-shadow:0 8px 22px rgba(85,94,232,.19); }
    9%,16% { background:linear-gradient(135deg,var(--pn-auth-business-1) 0%,#12b7a1 52%,var(--pn-auth-business-2) 100%);box-shadow:0 8px 22px rgba(18,176,154,.18); }
    16.5%,23.7% { background:linear-gradient(135deg,var(--pn-auth-romance-1) 0%,#ff6c95 50%,var(--pn-auth-romance-2) 100%);box-shadow:0 8px 22px rgba(255,101,154,.18); }
}
@keyframes pnAuthModeGlow {
    0%,8.6%,24.2%,100% { transform:scale(1);opacity:.74; }
    9%,16% { transform:scale(1.03) translate(-4px,2px);opacity:.8; }
    16.5%,23.7% { transform:scale(1.05) translate(-6px,4px);opacity:.82; }
}
@keyframes pnAuthModeWordFriends { 0%,8.6%,24.2%,100%{opacity:1;transform:translateY(0)}9%,23.7%{opacity:0;transform:translateY(6px)} }
@keyframes pnAuthModeWordBusiness { 0%,8.8%,16.2%,100%{opacity:0;transform:translateY(6px)}9.1%,15.9%{opacity:1;transform:translateY(0)} }
@keyframes pnAuthModeWordRomance { 0%,16.3%,23.9%,100%{opacity:0;transform:translateY(6px)}16.6%,23.6%{opacity:1;transform:translateY(0)} }
@keyframes pnAuthModeChipFriends { 0%,8.6%,24.2%,100%{color:#fff;box-shadow:0 7px 15px rgba(93,105,240,.26)}9%,23.7%{color:#8f8894;box-shadow:none} }
@keyframes pnAuthModeChipFillFriends { 0%,8.6%,24.2%,100%{opacity:1}9%,23.7%{opacity:0} }
@keyframes pnAuthModeChipBusiness { 0%,8.8%,16.2%,100%{color:#8f8894;box-shadow:none}9.1%,15.9%{color:#fff;box-shadow:0 7px 15px rgba(22,182,157,.24)} }
@keyframes pnAuthModeChipFillBusiness { 0%,8.8%,16.2%,100%{opacity:0}9.1%,15.9%{opacity:1} }
@keyframes pnAuthModeChipRomance { 0%,16.3%,23.9%,100%{color:#8f8894;box-shadow:none}16.6%,23.6%{color:#fff;box-shadow:0 7px 15px rgba(255,101,154,.22)} }
@keyframes pnAuthModeChipFillRomance { 0%,16.3%,23.9%,100%{opacity:0}16.6%,23.6%{opacity:1} }
@keyframes pnAuthWalletTheme {
    0%,8.6%,24.2%,100%{border-color:rgba(106,102,244,.16);background:rgba(106,102,244,.09);color:#5f57da}
    9%,16%{border-color:rgba(15,163,144,.17);background:rgba(15,163,144,.09);color:#118a7c}
    16.5%,23.7%{border-color:rgba(255,95,157,.18);background:rgba(255,95,157,.09);color:#e8558b}
}
@keyframes pnAuthCenterTheme {
    0%,8.6%,24.2%,100%{background:linear-gradient(145deg,var(--pn-auth-friends-1),var(--pn-auth-friends-2));box-shadow:0 12px 24px rgba(93,105,240,.28)}
    9%,16%{background:linear-gradient(145deg,var(--pn-auth-business-1),var(--pn-auth-business-2));box-shadow:0 12px 24px rgba(18,176,154,.24)}
    16.5%,23.7%{background:linear-gradient(145deg,var(--pn-auth-romance-1),var(--pn-auth-romance-2));box-shadow:0 12px 24px rgba(255,101,154,.22)}
}

/* Page state changes are deliberately placed just after their cursor click. */
@keyframes pnAuthProfile { 0%,30.1%{opacity:1;transform:translateX(0)}31.3%{opacity:0;transform:translateX(-9%)}31.4%,100%{opacity:0} }
@keyframes pnAuthNearby { 0%,30.1%{opacity:0;transform:translateX(10%)}31.4%,47.8%{opacity:1;transform:translateX(0)}49%,100%{opacity:0;transform:translateX(-5%)} }
@keyframes pnAuthNotifications { 0%,47.7%{opacity:0;transform:translateY(18%)}49.1%,56.7%{opacity:1;transform:translateY(0)}58.2%,100%{opacity:0;transform:translateY(8%)} }
@keyframes pnAuthCircles { 0%,57.7%{opacity:0;transform:translateX(8%)}59.1%,79.3%{opacity:1;transform:translateX(0)}80.5%,100%{opacity:0;transform:translateX(-4%)} }
@keyframes pnAuthCircleLibrary { 0%,58.9%{opacity:1;transform:translateX(0)}67.2%{opacity:1;transform:translateX(0)}68.5%{opacity:0;transform:translateX(-8%)}68.6%,100%{opacity:0} }
@keyframes pnAuthCircleDetail { 0%,67.2%{opacity:0;transform:translateX(18%)}68.7%,79.3%{opacity:1;transform:translateX(0)}80.5%,100%{opacity:0;transform:translateX(-5%)} }
@keyframes pnAuthFinal { 0%,79.4%{opacity:0;transform:translateY(10%) scale(.98)}80.8%,100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes pnAuthInterest { 0%,1.5%{opacity:0;transform:translateY(5px) scale(.94)}3.4%,28.8%{opacity:1;transform:none}30.5%,100%{opacity:0} }
@keyframes pnAuthSaved { 0%,21%{opacity:0;transform:translateY(5px)}23%,29%{opacity:1;transform:none}30.6%,100%{opacity:0} }
@keyframes pnAuthPinHike { 0%,33%{opacity:0;transform:scale(.72) translateY(8px)}35%,47.5%{opacity:1;transform:none}49%,100%{opacity:0} }
@keyframes pnAuthPinCoffee { 0%,36%{opacity:0;transform:scale(.72) translateY(8px)}38%,47.5%{opacity:1;transform:none}49%,100%{opacity:0} }
@keyframes pnAuthPinPhoto { 0%,39%{opacity:0;transform:scale(.72) translateY(8px)}41%,47.5%{opacity:1;transform:none}49%,100%{opacity:0} }
@keyframes pnAuthNavProfile { 0%,30.2%{color:#5d69f0}31%,100%{color:#8b8594} }
@keyframes pnAuthNavNearby { 0%,30.2%{color:#8b8594}31%,58%{color:#5d69f0}58.8%,100%{color:#8b8594} }
@keyframes pnAuthNavCircles { 0%,58%{color:#8b8594}58.8%,79.5%{color:#5d69f0}80.6%,100%{color:#8b8594} }

/* Pointer 1: demonstrates the three intent buttons. */
@keyframes pnAuthModeCursor {
    0%,4% { left:44%;top:16%;opacity:0;transform:translate(-2px,-2px) scale(1); }
    6% { left:63%;top:16%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    8.1% { left:63%;top:16%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    8.6% { left:63%;top:16%;opacity:1;transform:translate(-1px,-1px) scale(.82); }
    9.2% { left:63%;top:16%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    13.4% { left:79%;top:16%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    16% { left:79%;top:16%;opacity:1;transform:translate(-1px,-1px) scale(.82); }
    16.6% { left:79%;top:16%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    20.6% { left:48%;top:16%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    23.6% { left:48%;top:16%;opacity:1;transform:translate(-1px,-1px) scale(.82); }
    24.2% { left:48%;top:16%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    26.5%,100% { left:48%;top:16%;opacity:0;transform:translate(-2px,-2px) scale(1); }
}
@keyframes pnAuthModeCursorPulse {
    0%,8.1%,9.3%,15.5%,16.8%,23.1%,24.4%,100%{opacity:0;transform:scale(.2)}
    8.55%,16%,23.6%{opacity:.85;transform:scale(.55)}
    9.15%,16.65%,24.25%{opacity:0;transform:scale(1.65)}
}

/* Pointer 2: every page change is preceded by an explicit navigation click. */
@keyframes pnAuthNavCursor {
    0%,26.5% { left:90%;top:92%;opacity:0;transform:translate(-2px,-2px) scale(1); }
    28.2% { left:10%;top:94%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    29.7% { left:10%;top:94%;opacity:1;transform:translate(-1px,-1px) scale(.82); }
    30.5% { left:10%;top:94%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    43.8% { left:84%;top:6%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    47% { left:84%;top:6%;opacity:1;transform:translate(-1px,-1px) scale(.82); }
    47.8% { left:84%;top:6%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    52.2% { left:54%;top:38%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    56.2% { left:54%;top:38%;opacity:1;transform:translate(-1px,-1px) scale(.82); }
    57% { left:54%;top:38%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    62.2% { left:52%;top:47%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    67% { left:52%;top:47%;opacity:1;transform:translate(-1px,-1px) scale(.82); }
    67.8% { left:52%;top:47%;opacity:1;transform:translate(-2px,-2px) scale(1); }
    70.5% { left:52%;top:47%;opacity:0;transform:translate(-2px,-2px) scale(1); }
    100% { left:52%;top:47%;opacity:0;transform:translate(-2px,-2px) scale(1); }
}
@keyframes pnAuthNavCursorPulse {
    0%,29.2%,30.7%,46.5%,48.1%,55.7%,57.3%,66.5%,68.1%,100%{opacity:0;transform:scale(.2)}
    29.7%,47%,56.2%,67%{opacity:.88;transform:scale(.55)}
    30.45%,47.75%,56.95%,67.75%{opacity:0;transform:scale(1.75)}
}

/* Small response on the actual target reinforces what was clicked. */
.pn-auth-demo-actions .has-badge { animation: pnAuthBellPress var(--pn-auth-cycle) ease infinite; }
.pn-auth-demo-notification-item { animation: pnAuthNotificationPress var(--pn-auth-cycle) ease infinite; }
.pn-auth-demo-real-circle-card { animation: pnAuthCircleCardPress var(--pn-auth-cycle) ease infinite; }
@keyframes pnAuthBellPress { 0%,46.6%,47.4%,100%{transform:scale(1)}47%{transform:scale(.92)} }
@keyframes pnAuthNotificationPress { 0%,55.8%,56.7%,100%{transform:scale(1)}56.2%{transform:scale(.975)} }
@keyframes pnAuthCircleCardPress { 0%,66.6%,67.5%,100%{transform:scale(1)}67%{transform:scale(.985)} }

@media (max-width:760px) {
    .pn-auth-demo-cursor { width:14px;height:17px; }
    .pn-auth-demo-cursor > i { width:14px;height:14px;margin:-5px 0 0 -5px; }
}

@media (prefers-reduced-motion:reduce) {
    .pn-authentic-demo * { animation:none !important; }
    .pn-auth-demo-cursor { display:none !important; }
    .pn-auth-demo-profile,.pn-auth-demo-nearby,.pn-auth-demo-notifications,.pn-auth-demo-circles { display:none !important; }
    .pn-auth-demo-final { opacity:1 !important; transform:none !important; }
    .pn-auth-nav-circles { color:#8b8594 !important; }
}

/* ==========================================================================
   Nudjee 2.15.57 — per-user app appearance: Detailed / Simple
   Detailed remains the default. Simple preserves connection-mode identity but
   replaces decorative gradients with solid/tinted surfaces throughout the
   signed-in product chrome and common mode-aware components.
   ========================================================================== */
.pn-visual-style-settings { overflow: hidden; }
.pn-visual-style-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.pn-visual-style-option {
    position: relative;
    min-width: 0;
    min-height: 126px;
    padding: 13px;
    border: 1px solid rgba(31,35,50,.10);
    border-radius: 18px;
    background: #fff;
    display: grid;
    grid-template-columns: 72px minmax(0,1fr) 24px;
    gap: 11px;
    align-items: center;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pn-visual-style-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--pn-mode-accent, #7462f5) 32%, #dfe0e6); }
.pn-visual-style-option.is-selected {
    border-color: color-mix(in srgb, var(--pn-mode-accent, #7462f5) 48%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pn-mode-accent, #7462f5) 9%, transparent), 0 10px 26px rgba(28,31,45,.07);
}
.pn-visual-style-option > input { position: absolute; opacity: 0; pointer-events: none; }
.pn-visual-style-preview {
    position: relative;
    width: 72px;
    height: 82px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(20,24,40,.08);
    background: #f6f7fb;
    box-shadow: 0 8px 20px rgba(24,29,45,.08);
}
.pn-visual-style-preview::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 22px;
}
.pn-visual-style-preview::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 19px;
}
.pn-visual-style-preview > i,
.pn-visual-style-preview > b,
.pn-visual-style-preview > em {
    position: absolute;
    display: block;
    border-radius: 5px;
    font-style: normal;
}
.pn-visual-style-preview > i { left: 7px; top: 30px; width: 37px; height: 7px; }
.pn-visual-style-preview > b { left: 7px; top: 41px; width: 56px; height: 12px; }
.pn-visual-style-preview > em { left: 7px; top: 57px; width: 25px; height: 6px; }
.pn-visual-style-preview.is-detailed::before { background: linear-gradient(135deg, #233fa5, #4b70ef 52%, #725de8); }
.pn-visual-style-preview.is-detailed::after { background: linear-gradient(135deg, #233a98, #20266e); }
.pn-visual-style-preview.is-detailed > i { background: linear-gradient(90deg, rgba(75,124,255,.18), rgba(116,98,245,.26)); }
.pn-visual-style-preview.is-detailed > b { background: linear-gradient(135deg, #fff, #f1efff); }
.pn-visual-style-preview.is-detailed > em { background: linear-gradient(135deg, #4b7cff, #6756eb); }
.pn-visual-style-preview.is-simple::before { background: #344fb4; }
.pn-visual-style-preview.is-simple::after { background: #252f82; }
.pn-visual-style-preview.is-simple > i { background: #e7e9f7; }
.pn-visual-style-preview.is-simple > b { background: #fff; }
.pn-visual-style-preview.is-simple > em { background: #4b68d8; }
.pn-visual-style-copy { min-width: 0; display: grid; gap: 4px; text-align: left; }
.pn-visual-style-copy strong { color: var(--pn-ink, #1f2028); font-size: 14px; }
.pn-visual-style-copy small { color: var(--pn-muted, #74707b); font-size: 10px; line-height: 1.45; }
.pn-visual-style-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: transparent;
    background: #f1f1f4;
}
.pn-visual-style-check .pn-icon-svg { width: 13px; height: 13px; }
.pn-visual-style-option.is-selected .pn-visual-style-check { color: #fff; background: var(--pn-mode-accent, #7462f5); }

/* Solid palettes. The mode still changes exactly as Detailed does. */
#pn-app[data-visual-style="simple"] {
    --pn-mode-header-bg: #fff8fa;
    --pn-shell-top-bg: #b72f5c;
    --pn-shell-bar-bg: #a42753;
    --pn-shell-bottom-bg: #7c1c45;
    --pn-shell-active-bg: #e24672;
}
#pn-app[data-visual-style="simple"][data-discovery-view="platonic"],
#pn-app[data-visual-style="simple"][data-connection-mode="platonic"] {
    --pn-mode-header-bg: #f6f5ff;
    --pn-shell-top-bg: #344fb4;
    --pn-shell-bar-bg: #2c429f;
    --pn-shell-bottom-bg: #242e7e;
    --pn-shell-active-bg: #526fdf;
}
#pn-app[data-visual-style="simple"][data-discovery-view="business"],
#pn-app[data-visual-style="simple"][data-connection-mode="business"] {
    --pn-mode-header-bg: #f3fbfa;
    --pn-shell-top-bg: #087b74;
    --pn-shell-bar-bg: #076a65;
    --pn-shell-bottom-bg: #07534f;
    --pn-shell-active-bg: #16a99c;
}
#pn-app[data-visual-style="simple"][data-discovery-view="all"],
#pn-app[data-visual-style="simple"][data-connection-mode="all"] {
    --pn-mode-header-bg: #f6f6fa;
    --pn-shell-top-bg: #353852;
    --pn-shell-bar-bg: #30334c;
    --pn-shell-bottom-bg: #262941;
    --pn-shell-active-bg: #5e67cf;
}

/* Primary signed-in chrome */
#pn-app[data-visual-style="simple"] > .pn-app-header.pn-nearby-reference-header,
#pn-app[data-visual-style="simple"] > .pn-live-mode-bar,
#pn-app[data-visual-style="simple"] .pn-bottom-nav-reference {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#pn-app[data-visual-style="simple"] .pn-nearby-brand .pn-brand-mark,
#pn-app[data-visual-style="simple"] .pn-header-actions .pn-icon-button,
#pn-app[data-visual-style="simple"] .pn-header-actions .pn-status-pill,
#pn-app[data-visual-style="simple"] .pn-wallet-chip {
    background-image: none !important;
    background-color: rgba(255,255,255,.15) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#pn-app[data-visual-style="simple"] .pn-live-mode-switch button.is-active,
#pn-app[data-visual-style="simple"] .pn-bottom-nav-reference .pn-nav-item-primary {
    background: var(--pn-shell-active-bg) !important;
}
#pn-app[data-visual-style="simple"] .pn-bottom-nav-reference .pn-nav-item.is-active:not(.pn-nav-item-primary) {
    background-image: none !important;
    background-color: rgba(255,255,255,.17) !important;
}
#pn-app[data-visual-style="simple"][data-discovery-view="all"] .pn-brand-mark,
#pn-app[data-visual-style="simple"][data-discovery-view="all"] .pn-live-mode-switch button.is-active,
#pn-app[data-visual-style="simple"][data-discovery-view="all"] .pn-bottom-nav-reference .pn-nav-item-primary,
#pn-app[data-visual-style="simple"][data-discovery-view="all"] #pn-center-me {
    background: var(--pn-shell-active-bg) !important;
}

/* Mode-aware content surfaces */
#pn-app[data-visual-style="simple"] .pn-circles-reference-view { background: #fff !important; }
#pn-app[data-visual-style="simple"] .pn-circles-reference-hero { background: var(--pn-shell-top-bg) !important; }
#pn-app[data-visual-style="simple"] .pn-nearby-person-card.is-romance .pn-mode-photo-chip { background: #ee527c !important; }
#pn-app[data-visual-style="simple"] .pn-nearby-person-card.is-platonic .pn-mode-photo-chip { background: #6657df !important; }
#pn-app[data-visual-style="simple"] .pn-nearby-person-card.is-business .pn-mode-photo-chip { background: #238dce !important; }
#pn-app[data-visual-style="simple"] .pn-boost-symbol,
#pn-app[data-visual-style="simple"] .pn-boost-option b,
#pn-app[data-visual-style="simple"] .pn-membership-tabs button.is-active {
    background-image: none !important;
    background-color: var(--pn-mode-accent, #7462f5) !important;
}
#pn-app[data-visual-style="simple"] .pn-promo-access-card,
#pn-app[data-visual-style="simple"] .pn-settings-card,
#pn-app[data-visual-style="simple"] .pn-membership-quick-card {
    background-image: none !important;
}

/* Profile identity hero is intentionally always dark in both appearance modes. */
.pn-profile-hero-card {
    background-color: #17181f;
}
#pn-app[data-visual-style="simple"] .pn-profile-hero-card {
    background-image: none !important;
    background-color: #17181f !important;
    color: #fff !important;
}

/* Celebration screens are connection-mode surfaces too. */
body[data-nudge-visual-style="simple"] .pn-match-splash {
    background: var(--pn-match-b, #ff617b) !important;
}
body[data-nudge-visual-style="simple"] .pn-incoming-splash {
    background: var(--pn-incoming-b, #ff617b) !important;
}

@media (max-width: 680px) {
    .pn-visual-style-picker { grid-template-columns: 1fr; }
    .pn-visual-style-option { min-height: 104px; grid-template-columns: 64px minmax(0,1fr) 24px; }
    .pn-visual-style-preview { width: 64px; height: 72px; border-radius: 13px; }
    .pn-visual-style-preview::before { height: 19px; }
    .pn-visual-style-preview::after { height: 17px; }
    .pn-visual-style-preview > i { left: 6px; top: 27px; width: 33px; }
    .pn-visual-style-preview > b { left: 6px; top: 37px; width: 51px; height: 10px; }
    .pn-visual-style-preview > em { left: 6px; top: 51px; }
}

/* ========================================================================== 
   Nudjee 2.15.58 — guest intent splash + intent-aware landing
   Guests choose Friends, Business or Romance before the landing tour. The
   selection changes the landing palette, copy hierarchy and selected mode.
   ========================================================================== */
.pn-landing {
    --pn-guest-accent: #7183ff;
    --pn-guest-accent-2: #4e61df;
    --pn-guest-accent-soft: rgba(113,131,255,.16);
    --pn-guest-accent-glow: rgba(91,112,255,.24);
}
.pn-landing[data-guest-intent="platonic"] {
    --pn-guest-accent: #7183ff;
    --pn-guest-accent-2: #4e61df;
    --pn-guest-accent-soft: rgba(113,131,255,.16);
    --pn-guest-accent-glow: rgba(91,112,255,.25);
    background:
        radial-gradient(circle at 10% 4%, rgba(91,112,255,.25), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(76,160,255,.13), transparent 31%),
        radial-gradient(circle at 48% 74%, rgba(118,97,255,.13), transparent 36%),
        linear-gradient(148deg,#10172a 0%,#0e1422 50%,#0a121c 100%);
}
.pn-landing[data-guest-intent="business"] {
    --pn-guest-accent: #23c8b3;
    --pn-guest-accent-2: #0b8c82;
    --pn-guest-accent-soft: rgba(35,200,179,.15);
    --pn-guest-accent-glow: rgba(23,190,169,.22);
    background:
        radial-gradient(circle at 10% 4%, rgba(26,192,170,.23), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(35,131,199,.13), transparent 31%),
        radial-gradient(circle at 48% 74%, rgba(17,151,134,.12), transparent 36%),
        linear-gradient(148deg,#0d1d22 0%,#0c171d 50%,#091218 100%);
}
.pn-landing[data-guest-intent="romance"] {
    --pn-guest-accent: #ff6d9b;
    --pn-guest-accent-2: #d94775;
    --pn-guest-accent-soft: rgba(255,109,155,.15);
    --pn-guest-accent-glow: rgba(245,87,139,.22);
    background:
        radial-gradient(circle at 10% 4%, rgba(240,83,137,.24), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(255,132,112,.13), transparent 31%),
        radial-gradient(circle at 48% 74%, rgba(181,92,191,.12), transparent 36%),
        linear-gradient(148deg,#21111d 0%,#17121c 50%,#101218 100%);
}
.pn-landing[data-guest-intent] .pn-guest-glow-one { background: var(--pn-guest-accent-glow); }
.pn-landing[data-guest-intent] .pn-guest-glow-two { background: color-mix(in srgb, var(--pn-guest-accent) 15%, transparent); }
.pn-landing[data-guest-intent] .pn-btn-primary,
.pn-landing[data-guest-intent] .pn-plan-popular {
    background: linear-gradient(145deg,var(--pn-guest-accent),var(--pn-guest-accent-2));
}
/* Keep the Nudjee logo itself constant across Friends, Business and Romance. */
.pn-landing[data-guest-intent] .pn-brand-mark {
    background: var(--pn-brand-gradient);
    box-shadow: 0 14px 38px rgba(63, 155, 193, .27);
}
.pn-landing[data-guest-intent] .pn-btn-primary { box-shadow: 0 11px 25px color-mix(in srgb,var(--pn-guest-accent-2) 26%,transparent); }
.pn-landing[data-guest-intent] .pn-btn-primary:hover { box-shadow: 0 14px 31px color-mix(in srgb,var(--pn-guest-accent-2) 34%,transparent); }
.pn-landing[data-guest-intent] .pn-eyebrow,
.pn-landing[data-guest-intent] .pn-landing-proof .pn-icon-svg { color: color-mix(in srgb,var(--pn-guest-accent) 78%,white); }
.pn-landing[data-guest-intent] + .pn-guest-intent-splash { --pn-splash-current: var(--pn-guest-accent); }
.pn-landing[data-guest-intent] .pn-landing-progress-dot.is-active { background: color-mix(in srgb,var(--pn-guest-accent) 76%,transparent); }
.pn-landing[data-guest-intent] .pn-smart-radar-points .pn-icon-svg,
.pn-landing[data-guest-intent] .pn-circle-feature-list .pn-icon-svg,
.pn-landing[data-guest-intent] .pn-circle-access-points .pn-icon-svg { color: var(--pn-guest-accent); }
.pn-landing[data-guest-intent] .pn-smart-match-chip i { background: var(--pn-guest-accent); }
.pn-landing[data-guest-intent] .pn-reach-choice.is-selected {
    border-color: color-mix(in srgb,var(--pn-guest-accent) 48%,rgba(255,255,255,.1));
    background: color-mix(in srgb,var(--pn-guest-accent) 12%,rgba(255,255,255,.045));
}

/* The selected intent card becomes the hero card in Ways to connect. */
.pn-mode-story[data-pn-guest-mode-select] { cursor: pointer; transition: transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.pn-mode-story[data-pn-guest-mode-select]:hover { transform: translateY(-3px); }
.pn-mode-story[data-pn-guest-mode-select]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pn-mode-story.is-business.is-primary {
    border-color: rgba(71,219,201,.35);
    background: radial-gradient(circle at 85% 15%,rgba(35,200,179,.18),transparent 34%),linear-gradient(155deg,rgba(27,178,160,.12),rgba(255,255,255,.045));
    box-shadow: 0 24px 65px rgba(17,133,122,.13);
}
.pn-mode-story.is-business.is-primary .pn-mode-icon { background: rgba(42,205,185,.13); }
.pn-mode-story.is-romance.is-primary {
    border-color: rgba(255,110,157,.36);
    background: radial-gradient(circle at 85% 15%,rgba(255,100,151,.19),transparent 34%),linear-gradient(155deg,rgba(220,66,116,.12),rgba(255,255,255,.045));
    box-shadow: 0 24px 65px rgba(168,49,91,.13);
}
.pn-mode-story.is-romance.is-primary .pn-mode-icon { background: rgba(255,105,154,.13); }

/* Start the authentic phone's quick mode demonstration on the guest's choice. */
.pn-landing[data-guest-intent="platonic"] .pn-authentic-demo { --pn-auth-mode-delay: 0s; }
.pn-landing[data-guest-intent="business"] .pn-authentic-demo { --pn-auth-mode-delay: -3.2s; }
.pn-landing[data-guest-intent="romance"] .pn-authentic-demo { --pn-auth-mode-delay: -5.8s; }
/* The click-led demo uses one deterministic timeline so the cursor and UI always agree. */
.pn-landing[data-guest-intent] .pn-auth-demo-header,
.pn-landing[data-guest-intent] .pn-auth-demo-header::after,
.pn-landing[data-guest-intent] .pn-auth-demo-mode-label strong span,
.pn-landing[data-guest-intent] .pn-auth-demo-modes .pn-auth-mode-chip,
.pn-landing[data-guest-intent] .pn-auth-demo-modes .pn-auth-mode-chip::before,
.pn-landing[data-guest-intent] .pn-auth-demo-wallet,
.pn-landing[data-guest-intent] .pn-auth-demo-bottom-nav .pn-auth-nav-center {
    animation-delay: 0s !important;
}

/* Guest-intent splash */
.pn-guest-intent-splash {
    position: fixed;
    inset: 0;
    z-index: 12050;
    padding: max(22px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    display: grid;
    place-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    background: rgba(5,8,14,.68);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    backdrop-filter: blur(20px) saturate(1.15);
    opacity: 1;
    transition: opacity .32s ease,visibility .32s ease;
}
.pn-guest-intent-splash[hidden] { display: none !important; }
.pn-guest-intent-splash.is-closing { opacity: 0; pointer-events: none; }
.pn-guest-intent-backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.pn-guest-intent-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,rgba(16,19,34,.84),rgba(9,14,21,.91));
}
.pn-guest-intent-backdrop i {
    position: absolute;
    width: min(46vw,560px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(26px);
    opacity: .26;
}
.pn-guest-intent-backdrop .is-friends { left: -11vw; top: -15vw; background: radial-gradient(circle,#6477ff,transparent 66%); }
.pn-guest-intent-backdrop .is-business { right: -13vw; top: 3vh; background: radial-gradient(circle,#21bea9,transparent 66%); }
.pn-guest-intent-backdrop .is-romance { left: 32vw; bottom: -31vw; background: radial-gradient(circle,#f35c91,transparent 65%); }
.pn-guest-intent-dialog {
    position: relative;
    z-index: 2;
    width: min(100%,1020px);
    padding: clamp(24px,3.2vw,42px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 32px;
    background: linear-gradient(155deg,rgba(25,29,45,.94),rgba(13,18,27,.95));
    box-shadow: 0 42px 120px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
    color: #fff;
    overflow: hidden;
    animation: pnGuestIntentDialogIn .55s cubic-bezier(.16,.84,.2,1) both;
}
.pn-guest-intent-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 48% -12%,rgba(255,255,255,.08),transparent 34%);
}
.pn-guest-intent-brand { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.pn-guest-intent-brand .pn-brand-mark { width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#7183ff,#4e61df);box-shadow:0 10px 25px rgba(78,97,223,.28); }
.pn-guest-intent-brand .pn-brand-mark .pn-icon-svg { width:18px;height:18px; }
.pn-guest-intent-brand > span:last-child { display:grid;gap:2px; }
.pn-guest-intent-brand strong { font-size:16px;letter-spacing:-.03em; }
.pn-guest-intent-brand small { color:rgba(255,255,255,.52);font-size:9px;font-weight:750; }
.pn-guest-intent-heading { position:relative; z-index:1; max-width:760px;margin:0 auto 28px;text-align:center; }
.pn-guest-intent-heading .pn-eyebrow { color:#a9b3ff;font-size:10px;font-weight:900;letter-spacing:.16em; }
.pn-guest-intent-heading h2 { margin:10px 0 12px;color:#fff;font-size:clamp(28px,4vw,48px);line-height:1.03;letter-spacing:-.05em;text-wrap:balance; }
.pn-guest-intent-heading p { max-width:650px;margin:0 auto;color:rgba(255,255,255,.64);font-size:14px;line-height:1.65;text-wrap:balance; }
.pn-guest-intent-grid { position:relative; z-index:1; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.pn-guest-intent-choice {
    min-width:0;
    min-height:224px;
    padding:20px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:24px;
    color:#fff;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto 1fr;
    gap:16px 12px;
    align-items:start;
    text-align:left;
    cursor:pointer;
    overflow:hidden;
    position:relative;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.pn-guest-intent-choice::before { content:"";position:absolute;inset:0;opacity:.17;transition:opacity .22s ease;pointer-events:none; }
.pn-guest-intent-choice.is-friends::before { background:radial-gradient(circle at 18% 4%,#7486ff,transparent 48%); }
.pn-guest-intent-choice.is-business::before { background:radial-gradient(circle at 18% 4%,#23c8b3,transparent 48%); }
.pn-guest-intent-choice.is-romance::before { background:radial-gradient(circle at 18% 4%,#ff6998,transparent 48%); }
.pn-guest-intent-choice:hover { transform:translateY(-5px);background:rgba(255,255,255,.075);box-shadow:0 20px 42px rgba(0,0,0,.18); }
.pn-guest-intent-choice:hover::before { opacity:.28; }
.pn-guest-intent-choice:focus-visible { outline:2px solid #fff;outline-offset:3px; }
.pn-guest-intent-icon { position:relative;z-index:1;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff; }
.pn-guest-intent-choice.is-friends .pn-guest-intent-icon { background:linear-gradient(145deg,#7486ff,#4f60df);box-shadow:0 12px 28px rgba(85,102,225,.28); }
.pn-guest-intent-choice.is-business .pn-guest-intent-icon { background:linear-gradient(145deg,#27cbb5,#0b897f);box-shadow:0 12px 28px rgba(22,151,136,.25); }
.pn-guest-intent-choice.is-romance .pn-guest-intent-icon { background:linear-gradient(145deg,#ff729f,#d74776);box-shadow:0 12px 28px rgba(205,57,108,.25); }
.pn-guest-intent-icon .pn-icon-svg { width:22px;height:22px; }
.pn-guest-intent-choice > span:nth-child(2) { position:relative;z-index:1;grid-column:1 / -1;display:grid;gap:7px;align-self:end; }
.pn-guest-intent-choice small { color:rgba(255,255,255,.48);font-size:8px;font-weight:900;letter-spacing:.12em; }
.pn-guest-intent-choice strong { color:#fff;font-size:21px;line-height:1.08;letter-spacing:-.035em; }
.pn-guest-intent-choice em { color:rgba(255,255,255,.61);font-size:11px;line-height:1.55;font-style:normal; }
.pn-guest-intent-choice > i { position:relative;z-index:1;width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.68);font-style:normal;transition:transform .2s ease,background .2s ease; }
.pn-guest-intent-choice > i .pn-icon-svg { width:14px;height:14px; }
.pn-guest-intent-choice:hover > i { transform:translateX(3px);background:rgba(255,255,255,.08); }
.pn-guest-intent-footnote { position:relative;z-index:1;margin:22px auto 0;max-width:720px;color:rgba(255,255,255,.48);display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;font-size:9px;line-height:1.5; }
.pn-guest-intent-footnote .pn-icon-svg { flex:0 0 auto;width:14px;height:14px;color:#83d9ca; }
@keyframes pnGuestIntentDialogIn { from { opacity:0;transform:translateY(18px) scale(.975); } to { opacity:1;transform:none; } }

@media (max-width: 760px) {
    .pn-guest-intent-splash { align-items:start;padding-top:max(16px,env(safe-area-inset-top)); }
    .pn-guest-intent-dialog { width:100%;padding:20px 16px 18px;border-radius:25px;margin:auto 0; }
    .pn-guest-intent-brand { margin-bottom:20px; }
    .pn-guest-intent-brand .pn-brand-mark { width:34px;height:34px;border-radius:11px; }
    .pn-guest-intent-heading { margin-bottom:18px;text-align:left; }
    .pn-guest-intent-heading .pn-eyebrow { font-size:8px; }
    .pn-guest-intent-heading h2 { margin:7px 0 9px;font-size:30px;line-height:1.02; }
    .pn-guest-intent-heading p { margin:0;font-size:12px;line-height:1.55; }
    .pn-guest-intent-grid { grid-template-columns:1fr;gap:10px; }
    .pn-guest-intent-choice { min-height:0;padding:14px;border-radius:19px;grid-template-columns:42px minmax(0,1fr) 30px;grid-template-rows:1fr;gap:11px;align-items:center; }
    .pn-guest-intent-icon { width:42px;height:42px;border-radius:14px; }
    .pn-guest-intent-icon .pn-icon-svg { width:19px;height:19px; }
    .pn-guest-intent-choice > span:nth-child(2) { grid-column:auto;align-self:center;gap:3px; }
    .pn-guest-intent-choice small { font-size:6.7px;letter-spacing:.1em; }
    .pn-guest-intent-choice strong { font-size:16px; }
    .pn-guest-intent-choice em { font-size:9px;line-height:1.4; }
    .pn-guest-intent-choice > i { width:30px;height:30px; }
    .pn-guest-intent-footnote { margin-top:15px;font-size:8px;align-items:flex-start;text-align:left;justify-content:flex-start; }
}

@media (max-width: 390px) {
    .pn-guest-intent-dialog { padding:16px 13px 15px;border-radius:21px; }
    .pn-guest-intent-brand { margin-bottom:14px; }
    .pn-guest-intent-heading h2 { font-size:26px; }
    .pn-guest-intent-heading p { font-size:10.5px; }
    .pn-guest-intent-choice { padding:11px;grid-template-columns:38px minmax(0,1fr) 27px;gap:9px; }
    .pn-guest-intent-icon { width:38px;height:38px;border-radius:12px; }
    .pn-guest-intent-choice strong { font-size:14px; }
    .pn-guest-intent-choice em { font-size:8.2px; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-guest-intent-dialog { animation:none !important; }
    .pn-guest-intent-splash,.pn-guest-intent-choice { transition:none !important; }
}


/* ==========================================================================
   Nudjee 2.15.63 — guest-intent aware authentication story
   Sign in / Set up account now inherits the active guest intent instead of
   always presenting Romance copy. Desktop uses the story panel; compact
   layouts use a smaller in-modal context banner.
   ========================================================================== */
.pn-auth-mobile-context { display: none; }

#pn-auth-modal[data-guest-intent="platonic"] {
    --pn-auth-story-a: rgba(84, 103, 245, .38);
    --pn-auth-story-b: rgba(67, 157, 255, .23);
    --pn-auth-story-base-a: #181b34;
    --pn-auth-story-base-b: #111523;
    --pn-auth-context-accent: #5f67ee;
    --pn-auth-context-soft: rgba(95,103,238,.09);
}
#pn-auth-modal[data-guest-intent="business"] {
    --pn-auth-story-a: rgba(15, 170, 148, .40);
    --pn-auth-story-b: rgba(35, 207, 174, .22);
    --pn-auth-story-base-a: #102b29;
    --pn-auth-story-base-b: #0d191a;
    --pn-auth-context-accent: #119c8c;
    --pn-auth-context-soft: rgba(17,156,140,.09);
}
#pn-auth-modal[data-guest-intent="romance"] {
    --pn-auth-story-a: rgba(255, 78, 132, .40);
    --pn-auth-story-b: rgba(255, 128, 143, .22);
    --pn-auth-story-base-a: #2b1722;
    --pn-auth-story-base-b: #17131a;
    --pn-auth-context-accent: #f05a8d;
    --pn-auth-context-soft: rgba(240,90,141,.09);
}
#pn-auth-modal[data-guest-intent] {
    background:
        radial-gradient(circle at 15% 15%, var(--pn-auth-story-a), transparent 31%),
        rgba(13, 12, 18, .72);
}
#pn-auth-modal[data-guest-intent] .pn-auth-story {
    background:
        radial-gradient(circle at 22% 15%, var(--pn-auth-story-a), transparent 34%),
        radial-gradient(circle at 80% 82%, var(--pn-auth-story-b), transparent 42%),
        linear-gradient(150deg, var(--pn-auth-story-base-a) 0%, var(--pn-auth-story-base-b) 62%, #101116 100%);
}
#pn-auth-modal[data-guest-intent="platonic"] .pn-auth-story .pn-brand-mark { background: linear-gradient(145deg, #6967f3, #4a83f6); }
#pn-auth-modal[data-guest-intent="business"] .pn-auth-story .pn-brand-mark { background: linear-gradient(145deg, #10a68f, #22c9ad); }
#pn-auth-modal[data-guest-intent="romance"] .pn-auth-story .pn-brand-mark { background: linear-gradient(145deg, #ff5f96, #ff7c88); }

@media (max-width:900px) {
    #pn-auth-modal[data-guest-intent] .pn-auth-mobile-context {
        display: grid;
        gap: 4px;
        margin: 0 42px 18px 0;
        padding: 13px 15px;
        border: 1px solid color-mix(in srgb, var(--pn-auth-context-accent) 18%, transparent);
        border-radius: 16px;
        background: var(--pn-auth-context-soft);
    }
    #pn-auth-modal .pn-auth-mobile-context .pn-eyebrow {
        color: var(--pn-auth-context-accent);
        font-size: 9px;
        letter-spacing: .11em;
    }
    #pn-auth-modal .pn-auth-mobile-context > strong {
        color: var(--pn-ink);
        font-size: 17px;
        line-height: 1.12;
        letter-spacing: -.025em;
    }
    #pn-auth-modal .pn-auth-mobile-context > small {
        color: var(--pn-muted);
        font-size: 11px;
        line-height: 1.4;
    }
}

@media (max-width:620px) {
    #pn-auth-modal[data-guest-intent] .pn-auth-mobile-context {
        margin-right: 38px;
        margin-bottom: 16px;
        padding: 11px 13px;
        border-radius: 14px;
    }
    #pn-auth-modal .pn-auth-mobile-context > strong { font-size: 15px; }
    #pn-auth-modal .pn-auth-mobile-context > small { font-size: 10px; }
}


/* ==========================================================================
   Nudjee 2.15.66 — Investor Demo Mode disclosure badge
   ========================================================================== */
.pn-investor-demo-badge {
    position: fixed;
    z-index: 30000;
    top: calc(env(safe-area-inset-top, 0px) + 9px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100vw - 150px);
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 999px;
    background: rgba(24,25,36,.86);
    color: #fff;
    box-shadow: 0 7px 20px rgba(19,20,31,.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    pointer-events: none;
}
.pn-investor-demo-badge > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #8d7cff;
    box-shadow: 0 0 0 4px rgba(141,124,255,.16);
}
@media (max-width: 700px) {
    .pn-investor-demo-badge {
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
        max-width: calc(100vw - 24px);
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* ==========================================================================
   Nudjee 2.15.69 — photo-rich Investor Demo Circles
   ========================================================================== */
.pn-circle-photo-cover > .pn-circle-photo-credit,
.pn-circle-photo-credit {
    position: absolute;
    left: 7px;
    bottom: 7px;
    z-index: 5;
    width: auto;
    max-width: 56%;
    height: auto;
    min-height: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 7px;
    background: rgba(11, 14, 22, .68);
    box-shadow: none;
    backdrop-filter: blur(7px);
    color: rgba(255,255,255,.88);
    display: block;
    place-items: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 5.7px;
    font-weight: 650;
    line-height: 1.15;
    text-align: left;
}
.pn-circle-photo-credit a,
.pn-circle-detail-credit a {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}
.pn-circle-photo-credit a:hover,
.pn-circle-photo-credit a:focus-visible,
.pn-circle-detail-credit a:hover,
.pn-circle-detail-credit a:focus-visible {
    text-decoration: underline;
}
.pn-circle-detail-credit {
    position: absolute;
    left: 14px;
    bottom: 13px;
    z-index: 6;
    max-width: calc(100% - 28px);
    padding: 6px 9px;
    border-radius: 9px;
    background: rgba(10, 13, 21, .68);
    color: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    font-size: 8px;
    font-weight: 650;
    line-height: 1.2;
}
.pn-circle-detail-credit[hidden] { display: none !important; }

@media (max-width:640px) {
    .pn-circle-photo-cover > .pn-circle-photo-credit,
    .pn-circle-photo-credit {
        max-width: 58%;
        padding: 3px 5px;
        font-size: 5.2px;
    }
    .pn-circle-detail-credit {
        left: 12px;
        bottom: 11px;
        font-size: 7.4px;
    }
}

/* Nudjee 2.15.70 — Active Nearby cards open full profiles. */
.pn-hotspot-card[data-hotspot-profile]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pn-accent, #6f63ed) 34%, transparent);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--pn-accent, #6f63ed) 48%, #dcdce5);
}
.pn-hotspot-card[data-hotspot-profile] .pn-inbox-avatar,
.pn-hotspot-card[data-hotspot-profile] .pn-hotspot-info { cursor: pointer; }


/* 2.15.71 — blinded AI research study */
.pn-research-consent-row{align-items:flex-start!important;padding:12px 14px;border:1px solid rgba(109,93,252,.24);border-radius:14px;background:rgba(109,93,252,.07)}
.pn-research-consent-row span{font-size:12px;line-height:1.45}.pn-research-consent-row strong{display:inline;font-weight:800}
.pn-research-study-badge{background:rgba(26,28,40,.92)!important;color:#fff!important}
.pn-research-plan-note{display:block;margin-top:7px;padding:6px 8px;border-radius:8px;background:rgba(109,93,252,.09);color:#5b53b8;font-size:10px;line-height:1.35;font-weight:700}
.pn-meetup-message-card.is-research-simulated{border-style:dashed}

.pn-research-guess-open{border-color:rgba(109,93,252,.22)!important}.pn-research-guess-sheet{max-width:420px}.pn-research-guess-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.pn-research-guess-choice{border:1px solid var(--pn-border,#e1e3e8);background:#fff;border-radius:15px;padding:16px;text-align:left;cursor:pointer}.pn-research-guess-choice strong{display:block;font-size:16px}.pn-research-guess-choice small{display:block;margin-top:5px;line-height:1.35;color:#6d7080}.pn-research-guess-choice:hover{border-color:#6d5dfc;box-shadow:0 8px 20px rgba(56,48,140,.08)}@media(max-width:520px){.pn-research-guess-grid{grid-template-columns:1fr}.pn-research-guess-sheet{max-width:none}}


/* ==========================================================================
   Nudjee 2.15.85 — top incoming-message popup
   Clickable animated banner under the top nav, above modal z-stacks.
   ========================================================================== */
.pn-top-message-toast-layer {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 430px);
    z-index: 10060;
    pointer-events: none;
}
.pn-top-message-toast {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 12px 14px;
    border-radius: 20px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    background: linear-gradient(135deg, rgba(20, 25, 39, .97), rgba(32, 38, 58, .95));
    box-shadow: 0 18px 34px rgba(9, 11, 18, .28), inset 0 0 0 1px rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(-14px) scale(.97);
    transition: opacity .22s ease, transform .22s ease;
}
.pn-top-message-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.pn-top-message-toast.is-leaving { opacity: 0; transform: translateY(-10px) scale(.98); }
.pn-top-message-toast:hover { box-shadow: 0 22px 38px rgba(9, 11, 18, .32), inset 0 0 0 1px rgba(255,255,255,.09); }
.pn-top-message-toast-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #2b3042 center/cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    flex: 0 0 auto;
}
.pn-top-message-toast-mode {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(13,16,26,.92);
    color: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,.25);
}
.pn-top-message-toast-mode svg { width: 12px; height: 12px; }
.pn-top-message-toast-mode.is-romance { background: linear-gradient(135deg, #ff4d8d, #ff7d72); }
.pn-top-message-toast-mode.is-platonic { background: linear-gradient(135deg, #5a6cf6, #41a1ff); }
.pn-top-message-toast-mode.is-business { background: linear-gradient(135deg, #0ea88d, #16c4a7); }
.pn-top-message-toast-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pn-top-message-toast-copy small {
    color: rgba(255,255,255,.65);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pn-top-message-toast-copy strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.15;
}
.pn-top-message-toast-copy em {
    display: block;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-style: normal;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn-top-message-toast-tail {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    color: #fff;
}
.pn-top-message-toast-tail svg { width: 17px; height: 17px; }
@media (max-width: 767px) {
    .pn-top-message-toast-layer {
        top: calc(env(safe-area-inset-top, 0px) + 60px);
        width: min(94vw, 420px);
    }
    .pn-top-message-toast {
        gap: 10px;
        padding: 11px 12px;
        border-radius: 18px;
    }
    .pn-top-message-toast-avatar {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
    .pn-top-message-toast-copy strong { font-size: 14px; }
    .pn-top-message-toast-copy em { font-size: 12px; }
}

/* ==========================================================================
   Nudjee 2.15.85 — Admin Control Tower + audited Support Mode
   ========================================================================== */
.pn-admin-ops-overlay { z-index: 9200; }
.pn-admin-ops-shell {
    width: min(1180px, calc(100vw - 34px));
    height: min(820px, calc(100dvh - 34px));
    max-width: none;
    padding: 0;
    border-radius: 28px;
    overflow: hidden;
    background: #f5f6fa;
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
    box-shadow: 0 34px 90px rgba(18,22,34,.26);
}
.pn-admin-ops-head {
    padding: 22px 24px 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    color: #fff;
    background:
        radial-gradient(circle at 18% 0%, rgba(95,119,255,.36), transparent 30%),
        radial-gradient(circle at 88% 15%, rgba(19,197,167,.22), transparent 28%),
        linear-gradient(135deg,#151827,#222840 62%,#172c34);
}
.pn-admin-ops-head .pn-eyebrow { color: rgba(255,255,255,.62); }
.pn-admin-ops-head h2 { margin: 5px 0 4px; font-size: clamp(24px,3vw,36px); line-height: 1; }
.pn-admin-ops-head p { margin: 0; color: rgba(255,255,255,.7); }
.pn-admin-ops-head .pn-icon-button { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); }
.pn-admin-ops-tabs {
    padding: 10px 18px;
    display:flex;
    gap:7px;
    overflow-x:auto;
    background:#fff;
    border-bottom:1px solid #e6e8ef;
}
.pn-admin-ops-tabs button {
    border:0;
    border-radius:999px;
    padding:9px 14px;
    background:transparent;
    color:#656a79;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.pn-admin-ops-tabs button.is-active { color:#fff; background:#1d2234; box-shadow:0 6px 16px rgba(29,34,52,.16); }
.pn-admin-ops-body { min-height:0; overflow:auto; padding:18px; }
.pn-admin-ops-panel { display:none; }
.pn-admin-ops-panel.is-active { display:block; }
.pn-admin-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.pn-admin-metric {
    min-width:0;
    padding:15px;
    border:1px solid #e6e8ef;
    border-radius:18px;
    background:#fff;
    box-shadow:0 7px 20px rgba(31,37,54,.045);
}
.pn-admin-metric small,.pn-admin-metric em { display:block; color:#888d9b; font-size:10px; font-style:normal; }
.pn-admin-metric small { text-transform:uppercase; letter-spacing:.07em; font-weight:850; }
.pn-admin-metric strong { display:block; margin:6px 0 4px; color:#202437; font-size:22px; line-height:1; }
.pn-admin-ops-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.pn-admin-ops-card { border:1px solid #e6e8ef; border-radius:20px; background:#fff; overflow:hidden; }
.pn-admin-ops-card > header { padding:15px 16px 12px; display:flex; justify-content:space-between; gap:12px; align-items:center; border-bottom:1px solid #edf0f4; }
.pn-admin-ops-card > header span { display:block; color:#8d92a0; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.pn-admin-ops-card > header strong { display:block; margin-top:3px; color:#272b3b; font-size:14px; }
.pn-admin-ops-card > header > small { color:#8c91a0; font-size:10px; }
.pn-admin-signup-strip { display:grid; grid-template-columns:repeat(3,1fr); padding:18px; gap:10px; }
.pn-admin-signup-strip i { padding:14px; border-radius:15px; background:#f5f6fa; font-style:normal; text-align:center; }
.pn-admin-signup-strip b { display:block; font-size:24px; color:#272b3b; }
.pn-admin-signup-strip small { color:#898e9b; }
.pn-admin-note { margin:0; padding:0 18px 18px; color:#858a98; font-size:10px; line-height:1.45; }
.pn-admin-recent-users { display:grid; }
.pn-admin-recent-users button { border:0; border-bottom:1px solid #eef0f4; background:#fff; padding:10px 14px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; align-items:center; text-align:left; cursor:pointer; }
.pn-admin-recent-users button:last-child { border-bottom:0; }
.pn-admin-recent-users button > span { width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#eceef5;color:#4c536c;font-weight:900; }
.pn-admin-recent-users i { min-width:0; font-style:normal; }
.pn-admin-recent-users strong,.pn-admin-recent-users small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-admin-recent-users small { color:#9296a2; font-size:9px; }
.pn-admin-recent-users em { font-style:normal; text-transform:capitalize; color:#4a5269; font-size:10px; font-weight:800; }
.pn-admin-user-toolbar { margin-bottom:12px; display:flex; gap:9px; align-items:flex-end; }
.pn-admin-user-toolbar label { flex:1; }
.pn-admin-user-toolbar label span { display:block;margin-bottom:5px;color:#737988;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }
.pn-admin-user-toolbar input { width:100%; min-height:42px; border:1px solid #dde1e9; border-radius:13px; padding:0 13px; background:#fff; }
.pn-admin-user-table { border:1px solid #e2e5ec; border-radius:18px; background:#fff; overflow:hidden; }
.pn-admin-user-head,.pn-admin-user-row { display:grid; grid-template-columns:minmax(220px,2fr) .75fr .65fr .85fr .9fr minmax(150px,1fr); gap:10px; align-items:center; }
.pn-admin-user-head { padding:9px 13px; background:#f1f3f7; color:#858b98; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.pn-admin-user-row { padding:11px 13px; border-top:1px solid #edf0f4; }
.pn-admin-user-row > span:not(.pn-admin-user-identity):not(.pn-admin-user-actions) strong,.pn-admin-user-row > span:not(.pn-admin-user-identity):not(.pn-admin-user-actions) small { display:block; }
.pn-admin-user-row > span:not(.pn-admin-user-identity):not(.pn-admin-user-actions) small { color:#9297a4;font-size:9px; }
.pn-admin-user-identity { min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr); gap:9px; align-items:center; }
.pn-admin-user-identity > b { width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#eceff6;color:#4b526b; }
.pn-admin-user-identity i { min-width:0; font-style:normal; }
.pn-admin-user-identity strong,.pn-admin-user-identity em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-admin-user-identity strong small { color:#9a9eaa;font-weight:600; }
.pn-admin-user-identity em { color:#8e939f;font-size:9px;font-style:normal; }
.pn-admin-user-actions { display:flex; gap:7px; align-items:center; }
.pn-admin-user-actions .pn-btn { padding:8px 10px; min-height:32px; font-size:10px; }
.pn-admin-user-actions a { color:#5a62cb; font-size:9px; font-weight:800; }
.pn-admin-pagination { display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px; }
.pn-admin-pagination button { border:1px solid #dce0e8;background:#fff;border-radius:999px;padding:7px 11px;cursor:pointer; }
.pn-admin-pagination span { color:#858a98;font-size:10px; }
.pn-admin-revenue-chart-card { margin-bottom:14px; }
.pn-admin-revenue-chart { height:190px; padding:18px 16px 10px; display:flex; align-items:flex-end; gap:7px; }
.pn-admin-revenue-bar { position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;font-style:normal;min-width:12px; }
.pn-admin-revenue-bar span { width:min(24px,82%); height:var(--pn-admin-bar); min-height:4px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#646ff1,#22aa94); transition:transform .16s ease; }
.pn-admin-revenue-bar:hover span { transform:scaleX(1.08); }
.pn-admin-revenue-bar small { font-size:8px;color:#9a9eaa;writing-mode:vertical-rl;transform:rotate(180deg);max-height:32px; }
[data-admin-tip] { position:relative; }
[data-admin-tip]::after { content:attr(data-admin-tip); position:absolute; z-index:4; left:50%; bottom:calc(100% + 8px); transform:translate(-50%,4px); width:max-content; max-width:min(420px,80vw); padding:8px 10px; border-radius:10px; background:#141827; color:#fff; font-size:9px; line-height:1.4; white-space:normal; opacity:0; pointer-events:none; transition:.15s ease; box-shadow:0 8px 24px rgba(0,0,0,.2); }
[data-admin-tip]:hover::after { opacity:1; transform:translate(-50%,0); }
.pn-admin-revenue-list,.pn-admin-audit-list { display:grid; }
.pn-admin-revenue-row { display:grid;grid-template-columns:1.25fr 1fr .65fr 1.5fr;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid #edf0f4; }
.pn-admin-revenue-row:last-child { border-bottom:0; }
.pn-admin-revenue-row span strong,.pn-admin-revenue-row span small { display:block; }
.pn-admin-revenue-row span small { color:#9398a4;font-size:9px; }
.pn-admin-revenue-row code { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#666d80;background:#f1f3f6;padding:6px 8px;border-radius:8px; }
.pn-admin-audit-row { display:grid;grid-template-columns:1fr 1.6fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid #e7e9ef;border-radius:14px;background:#fff;margin-bottom:8px; }
.pn-admin-audit-row span strong,.pn-admin-audit-row span small { display:block; }
.pn-admin-audit-row span small { color:#8d929f;font-size:9px;margin-top:2px; }
.pn-admin-audit-row time { color:#8d929f;font-size:9px;white-space:nowrap; }
.pn-support-start-sheet { max-width:560px; }
.pn-support-security-note { display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid #dce3ef;border-radius:14px;background:#f5f8fc;color:#3b4356; }
.pn-support-security-note > svg { width:22px;height:22px; }
.pn-support-security-note strong,.pn-support-security-note small { display:block; }
.pn-support-security-note small { margin-top:3px;color:#768091;line-height:1.4; }
.pn-support-mode-banner {
    position:fixed;
    z-index:12050;
    top:0;
    left:0;
    right:0;
    min-height:54px;
    padding:7px max(14px,env(safe-area-inset-right)) 7px max(14px,env(safe-area-inset-left));
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    color:#fff;
    background:linear-gradient(90deg,#8b2e3d,#b24052 48%,#703147);
    box-shadow:0 7px 22px rgba(72,17,31,.22);
}
.pn-support-mode-banner > span:not(.pn-support-live-dot) { min-width:0;display:grid;grid-template-columns:auto auto auto;gap:7px;align-items:baseline; }
.pn-support-mode-banner small { font-size:9px;font-weight:900;letter-spacing:.08em;opacity:.72; }
.pn-support-mode-banner strong { font-size:12px; }
.pn-support-mode-banner em { font-size:9px;font-style:normal;opacity:.72; }
.pn-support-live-dot { width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12);animation:pnSupportPulse 1.5s ease-in-out infinite; }
.pn-support-mode-banner button { border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;padding:7px 11px;font-size:10px;font-weight:850;cursor:pointer; }
body.pn-support-mode-active .pn-app-header { margin-top:54px; }
.pn-support-locked-control { opacity:.45 !important; cursor:not-allowed !important; }
@keyframes pnSupportPulse { 50% { transform:scale(.82);opacity:.68; } }

@media (max-width: 900px) {
    .pn-admin-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .pn-admin-user-head { display:none; }
    .pn-admin-user-row { grid-template-columns:minmax(180px,1.5fr) repeat(2,minmax(80px,.7fr)) minmax(130px,1fr); }
    .pn-admin-user-row > span:nth-child(4),.pn-admin-user-row > span:nth-child(5) { display:none; }
}
@media (max-width: 680px) {
    .pn-admin-ops-shell { width:100%;height:100dvh;border-radius:0; }
    .pn-admin-ops-head { padding:18px 16px 14px; }
    .pn-admin-ops-body { padding:12px; }
    .pn-admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pn-admin-ops-grid { grid-template-columns:1fr; }
    .pn-admin-user-toolbar { align-items:stretch;flex-direction:column; }
    .pn-admin-user-row { grid-template-columns:minmax(0,1fr) auto;gap:8px; }
    .pn-admin-user-row > span:nth-child(2),.pn-admin-user-row > span:nth-child(3),.pn-admin-user-row > span:nth-child(4),.pn-admin-user-row > span:nth-child(5) { display:none; }
    .pn-admin-user-actions { justify-content:flex-end; }
    .pn-admin-user-actions a { display:none; }
    .pn-admin-revenue-row { grid-template-columns:minmax(0,1fr) auto; }
    .pn-admin-revenue-row > span:nth-child(2),.pn-admin-revenue-row code { display:none; }
    .pn-admin-audit-row { grid-template-columns:1fr;gap:4px; }
    .pn-support-mode-banner { justify-content:flex-start;min-height:64px; }
    .pn-support-mode-banner > span:not(.pn-support-live-dot) { grid-template-columns:1fr;gap:0; }
    .pn-support-mode-banner em { display:none; }
    .pn-support-mode-banner button { margin-left:auto; }
    body.pn-support-mode-active .pn-app-header { margin-top:64px; }
}
.pn-admin-revenue-head-actions { display:flex;align-items:center;gap:9px; }
.pn-admin-revenue-head-actions .pn-btn { min-height:32px;padding:7px 10px;font-size:9px; }
@media (max-width:680px){.pn-admin-revenue-head-actions small{display:none}.pn-admin-revenue-head-actions .pn-btn{white-space:nowrap}}

/* === 2.15.92 friendship ranking, skip deck, no-scroll nudge splash, demo Boost === */
.pn-friend-commonality {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #7462f5 20%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, #7462f5 8%, #fff);
    display: grid;
    gap: 2px;
}
.pn-friend-commonality strong {
    color: #5140c9;
    font-size: 11px;
    font-weight: 850;
}
.pn-friend-commonality small {
    color: var(--pn-muted, #6d7280);
    font-size: 9px;
}
.pn-tag.is-common {
    background: color-mix(in srgb, #7462f5 13%, #fff);
    color: #5140c9;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #7462f5 18%, transparent);
}
.pn-nearby-actions.has-skip {
    grid-template-columns: 48px minmax(0, 1fr) auto;
}
.pn-friend-skip {
    min-width: 72px;
    padding-inline: 14px;
}
.pn-friend-skip.is-loading { opacity: .6; cursor: wait; }

@media (max-width: 860px) {
    .pn-mobile-commonality-badge {
        position: absolute;
        z-index: 4;
        top: 13px;
        right: 13px;
        min-height: 29px;
        padding: 0 10px;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 999px;
        background: rgba(34, 27, 76, .70);
        color: #fff;
        display: inline-flex;
        align-items: center;
        font-size: 9px;
        font-weight: 850;
        backdrop-filter: blur(10px);
    }
    .pn-mobile-person-meta.has-skip { right: 136px; }
    .pn-mobile-skip-friend {
        position: absolute;
        z-index: 4;
        right: 72px;
        bottom: 17px;
        min-width: 54px;
        height: 42px;
        padding: 0 12px;
        border: 1px solid rgba(255,255,255,.65);
        border-radius: 999px;
        background: rgba(18,18,26,.48);
        color: #fff;
        font-size: 10px;
        font-weight: 850;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 20px rgba(5,5,9,.18);
    }
    .pn-mobile-skip-friend:disabled { opacity: .6; }
}

/* Incoming Nudge celebration must never create browser/modal scrollbars. */
#pn-incoming-nudge-modal.pn-incoming-splash-overlay {
    box-sizing: border-box;
    overflow: hidden !important;
    padding: clamp(8px, 2vh, 18px);
}
#pn-incoming-nudge-modal .pn-incoming-splash {
    box-sizing: border-box;
    width: min(100%, 430px);
    height: min(760px, calc(100dvh - clamp(16px, 4vh, 36px)));
    min-height: 0 !important;
    max-height: calc(100dvh - clamp(16px, 4vh, 36px));
    overflow: hidden !important;
    padding: clamp(42px, 6.5vh, 58px) clamp(18px, 4vw, 30px) clamp(16px, 3vh, 28px);
    display: flex;
    flex-direction: column;
}
#pn-incoming-nudge-modal .pn-incoming-splash-copy h2 {
    margin-top: clamp(2px, 2vh, 20px);
    font-size: clamp(26px, min(7vw, 5.2vh), 38px);
}
#pn-incoming-nudge-modal .pn-incoming-splash-portrait {
    width: clamp(108px, 22vh, 184px);
    height: clamp(108px, 22vh, 184px);
    margin: clamp(10px, 2.6vh, 28px) auto clamp(5px, 1.4vh, 12px);
    flex: 0 0 auto;
}
#pn-incoming-nudge-modal .pn-incoming-splash-photo {
    width: 100%;
    height: 100%;
}
#pn-incoming-nudge-modal .pn-incoming-splash-mode {
    width: clamp(42px, 6.5vh, 54px);
    height: clamp(42px, 6.5vh, 54px);
}
#pn-incoming-nudge-modal .pn-incoming-splash-meta {
    margin-bottom: clamp(8px, 2vh, 20px);
}
#pn-incoming-nudge-modal .pn-incoming-splash-shared { gap: clamp(5px, 1.2vh, 10px); }
#pn-incoming-nudge-modal .pn-incoming-splash-interest-list { gap: 6px; }
#pn-incoming-nudge-modal .pn-incoming-splash-interest-list span {
    min-height: clamp(26px, 4vh, 34px);
    padding-inline: 11px;
}
#pn-incoming-nudge-modal .pn-incoming-splash-note,
#pn-incoming-nudge-modal .pn-incoming-splash-value,
#pn-incoming-nudge-modal .pn-incoming-splash-connect-card {
    margin-top: clamp(8px, 1.8vh, 20px);
    padding: clamp(10px, 1.8vh, 16px) 16px;
}
#pn-incoming-nudge-modal .pn-incoming-splash-note p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#pn-incoming-nudge-modal .pn-incoming-splash-connect-card {
    min-height: 0;
}
#pn-incoming-nudge-modal .pn-incoming-splash-connect-icon {
    width: clamp(42px, 6.5vh, 56px);
    height: clamp(42px, 6.5vh, 56px);
}
#pn-incoming-nudge-modal .pn-incoming-splash-actions {
    margin-top: auto;
    padding-top: clamp(8px, 1.8vh, 24px);
    gap: 0;
}
#pn-incoming-nudge-modal .pn-incoming-splash-actions .pn-btn-primary {
    min-height: clamp(44px, 6.5vh, 54px);
}
#pn-incoming-nudge-modal .pn-incoming-splash-actions .pn-text-button {
    min-height: clamp(28px, 4.5vh, 38px);
}

@media (max-width: 620px) {
    #pn-incoming-nudge-modal.pn-incoming-splash-overlay {
        top: var(--pn-visual-viewport-offset);
        bottom: auto;
        width: 100%;
        height: var(--pn-visual-viewport-height);
        max-height: var(--pn-visual-viewport-height);
        padding: 8px;
        overflow: hidden !important;
        align-items: center;
        justify-content: center;
    }
    #pn-incoming-nudge-modal .pn-incoming-splash {
        width: 100%;
        height: calc(var(--pn-visual-viewport-height) - 16px);
        max-height: calc(var(--pn-visual-viewport-height) - 16px);
        min-height: 0 !important;
        border-radius: 28px;
    }
}

@media (max-height: 680px) {
    #pn-incoming-nudge-modal .pn-incoming-splash { padding-top: 42px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-copy p { font-size: 12px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-shared > small { font-size: 10px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-note,
    #pn-incoming-nudge-modal .pn-incoming-splash-value,
    #pn-incoming-nudge-modal .pn-incoming-splash-connect-card { padding-block: 9px; }
}
@media (max-height: 540px) {
    #pn-incoming-nudge-modal .pn-incoming-splash { padding-top: 38px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-copy h2 { font-size: 24px; margin-bottom: 4px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-portrait { width: 86px; height: 86px; margin-block: 6px 4px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-mode { width: 36px; height: 36px; border-width: 3px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-meta { margin-bottom: 5px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-shared { display: none; }
    #pn-incoming-nudge-modal .pn-incoming-splash-connect-card { display: none; }
    #pn-incoming-nudge-modal .pn-incoming-splash-note,
    #pn-incoming-nudge-modal .pn-incoming-splash-value { margin-top: 5px; padding: 7px 12px; }
    #pn-incoming-nudge-modal .pn-incoming-splash-actions { padding-top: 5px; }
}

/* Investor / AI Research Boost: electric-aqua + violet aurora pulse. */
#pn-app .pn-scan-radius-readout.is-boosted {
    background: linear-gradient(135deg, rgba(0, 102, 122, .94), rgba(73, 52, 184, .94));
    box-shadow: 0 14px 38px rgba(0, 217, 200, .30), 0 0 0 1px rgba(164, 137, 255, .22);
}
#pn-app .pn-scan-radius-readout.is-boosted .pn-scan-radius-readout-pulse {
    border-color: #b7fff7;
    box-shadow: 0 0 0 0 rgba(0, 244, 224, .60);
    animation: pnBoostReadoutPulse 1.35s ease-out infinite;
}
#pn-map-container .pn-scan-radius-pulse.is-boosted {
    stroke: #00e7d2 !important;
    filter: drop-shadow(0 0 4px rgba(0,231,210,.55)) drop-shadow(0 0 9px rgba(139,108,255,.30));
    animation: pnBoostBoundaryShimmer 1.55s ease-in-out infinite;
}
#pn-map-container .pn-scan-radius-radar.is-boosted {
    stroke: #00f0da !important;
    fill: rgba(0,240,218,.10) !important;
    filter: drop-shadow(0 0 5px rgba(0,240,218,.70));
    animation: pnBoostAuroraWave 1.55s cubic-bezier(.12,.7,.2,1) infinite;
}
#pn-map-container .pn-scan-radius-boost-echo {
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    stroke: #9b7cff !important;
    fill: none !important;
    filter: drop-shadow(0 0 5px rgba(155,124,255,.70));
    animation: pnBoostAuroraEcho 1.55s .43s cubic-bezier(.12,.7,.2,1) infinite;
    will-change: transform, opacity;
}
#pn-map-wrapper.pn-demo-boost-showcase #pn-map-container {
    animation: pnBoostMapArrival 1.6s ease-out both;
}
#pn-map-container.pn-map-interacting .pn-scan-radius-boost-echo { animation-play-state: paused !important; }

@keyframes pnBoostBoundaryShimmer {
    0%, 100% { opacity: .42; stroke-dashoffset: 0; }
    50% { opacity: .95; stroke-dashoffset: 20; }
}
@keyframes pnBoostAuroraWave {
    0% { opacity: .96; transform: scale(.62); }
    55% { opacity: .42; }
    100% { opacity: 0; transform: scale(3.85); }
}
@keyframes pnBoostAuroraEcho {
    0% { opacity: .88; transform: scale(.82) rotate(0deg); }
    58% { opacity: .30; }
    100% { opacity: 0; transform: scale(4.6) rotate(105deg); }
}
@keyframes pnBoostReadoutPulse {
    0% { box-shadow: 0 0 0 0 rgba(0,244,224,.62), 0 0 12px rgba(155,124,255,.18); }
    70% { box-shadow: 0 0 0 9px rgba(0,244,224,0), 0 0 18px rgba(155,124,255,.36); }
    100% { box-shadow: 0 0 0 0 rgba(0,244,224,0), 0 0 8px rgba(155,124,255,.12); }
}
@keyframes pnBoostMapArrival {
    0% { filter: saturate(.92) brightness(.98); }
    34% { filter: saturate(1.18) brightness(1.04); }
    100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    #pn-map-container .pn-scan-radius-boost-echo,
    #pn-map-wrapper.pn-demo-boost-showcase #pn-map-container { animation: none !important; }
}

/* === 2.15.93 map-click Nearby modal parity === */
@media (min-width: 861px) {
    #pn-mobile-discovery-modal.pn-mobile-discovery-overlay {
        padding: 24px;
        align-items: center;
        justify-content: center;
        background: rgba(18, 16, 24, .54);
    }

    #pn-mobile-discovery-modal .pn-mobile-discovery-shell {
        width: min(92vw, 720px);
        max-width: 720px;
        max-height: min(86vh, 820px);
        border-radius: 28px;
        background: #fbfbfd;
        overflow: hidden;
    }

    #pn-mobile-discovery-modal .pn-mobile-discovery-header {
        min-height: 82px;
        padding: 18px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        border-bottom: 1px solid var(--pn-line);
        background: #fff;
    }

    #pn-mobile-discovery-modal .pn-mobile-nearby-title {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 11px;
    }

    #pn-mobile-discovery-modal .pn-mobile-nearby-spark {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: var(--pn-mode-accent);
        background: var(--pn-mode-soft);
    }

    #pn-mobile-discovery-modal .pn-mobile-nearby-spark .pn-icon-svg {
        width: 20px;
        height: 20px;
    }

    #pn-mobile-discovery-modal .pn-mobile-discovery-header h3 {
        margin: 0;
        font-size: 24px;
    }

    #pn-mobile-discovery-modal #pn-mobile-discovery-kicker {
        display: block;
        margin-top: 5px;
        color: var(--pn-muted);
        font-size: 12px;
        line-height: 1.35;
    }

    #pn-mobile-discovery-modal .pn-mobile-mode-strip {
        display: none;
    }

    #pn-mobile-discovery-modal .pn-mobile-discovery-body {
        max-height: calc(min(86vh, 820px) - 82px);
        overflow-y: auto;
        overflow-x: hidden;
        background: #fbfbfd;
    }

    #pn-mobile-discovery-body .pn-nearby-panel {
        min-height: 0;
        padding: 24px;
        border-left: 0;
        background: #fbfbfd;
    }

    #pn-mobile-discovery-body .pn-nearby-heading {
        display: none;
    }

    #pn-mobile-discovery-body .pn-nearby-card {
        min-height: 390px;
    }
}

@media (min-width: 861px) {
    #pn-mobile-discovery-modal .pn-mobile-discovery-shell {
        --pn-desktop-nearby-accent: #ff3d6e;
        --pn-desktop-nearby-soft: rgba(255, 61, 110, .10);
    }

    #pn-mobile-discovery-modal[data-connection-mode="platonic"] .pn-mobile-discovery-shell {
        --pn-desktop-nearby-accent: #7462f5;
        --pn-desktop-nearby-soft: rgba(116, 98, 245, .11);
    }

    #pn-mobile-discovery-modal[data-connection-mode="business"] .pn-mobile-discovery-shell {
        --pn-desktop-nearby-accent: #119c92;
        --pn-desktop-nearby-soft: rgba(17, 156, 146, .11);
    }

    #pn-mobile-discovery-modal[data-connection-mode="all"] .pn-mobile-discovery-shell {
        --pn-desktop-nearby-accent: #5b6072;
        --pn-desktop-nearby-soft: rgba(91, 96, 114, .11);
    }

    #pn-mobile-discovery-modal .pn-mobile-nearby-spark {
        color: var(--pn-desktop-nearby-accent);
        background: var(--pn-desktop-nearby-soft);
    }
}

/* v2.15.94 — QR Poster campaign handoff */
.pn-qr-offer-banner {
    display: grid;
    gap: 3px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(74, 222, 128, .28);
    border-radius: 14px;
    background: rgba(74, 222, 128, .08);
}
.pn-qr-offer-banner.is-selection-only {
    border-color: rgba(148, 163, 184, .28);
    background: rgba(148, 163, 184, .08);
}
.pn-qr-offer-banner strong { font-size: 14px; }
.pn-qr-offer-banner span { font-size: 12px; opacity: .78; line-height: 1.45; }


/* 2.15.95 — live authenticated state on browser-restored landing headers */
.pn-landing-session-cta {
    justify-self: end;
    min-height: 46px;
    max-width: 230px;
    padding: 7px 13px 7px 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 15px;
    color: #fff;
    background: rgba(255,255,255,.085);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pn-landing-session-cta:hover,
.pn-landing-session-cta:focus-visible {
    color: #fff;
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.14);
    transform: translateY(-1px);
}
.pn-landing-session-dot {
    position: relative;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: #65f6b3;
    box-shadow: 0 0 0 4px rgba(101,246,179,.12), 0 0 16px rgba(101,246,179,.35);
}
.pn-landing-session-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(101,246,179,.35);
    border-radius: inherit;
    animation: pnLandingSessionPulse 2.4s ease-out infinite;
}
.pn-landing-session-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    line-height: 1.05;
}
.pn-landing-session-copy small {
    max-width: 175px;
    overflow: hidden;
    color: rgba(255,255,255,.62);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}
.pn-landing-session-copy strong {
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}
@keyframes pnLandingSessionPulse {
    0% { opacity: .8; transform: scale(.7); }
    70%, 100% { opacity: 0; transform: scale(1.65); }
}

@media (max-width: 760px) {
    .pn-landing-session-cta {
        min-height: 42px;
        max-width: min(48vw, 190px);
        padding: 6px 10px 6px 9px;
        border-radius: 14px;
        gap: 8px;
    }
    .pn-landing-session-copy small { max-width: 125px; font-size: 7px; }
    .pn-landing-session-copy strong { font-size: 10px; }
}

@media (max-width: 430px) {
    .pn-landing-session-cta { max-width: 145px; }
    .pn-landing-session-copy small { max-width: 98px; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-landing-session-dot::after { animation: none; }
    .pn-landing-session-cta { transition: none; }
}

/* === 2.15.98 Circle member profiles + stable Nearby friendship portrait geometry === */
/* Circle chat identity is an explicit profile affordance. */
.pn-circle-profile-trigger {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
}
.pn-circle-message > .pn-circle-profile-avatar {
    width: 32px;
    height: 32px;
    align-self: end;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(25, 27, 36, .08);
}
.pn-circle-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pn-circle-profile-name {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 4px 7px;
    border-radius: 7px;
    text-align: left;
}
.pn-circle-profile-name strong {
    margin: 0;
    display: block;
}
.pn-circle-profile-avatar:hover,
.pn-circle-profile-name:hover strong {
    filter: brightness(.94);
}
.pn-circle-profile-trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pn-tab-accent, #7462f5) 30%, transparent);
    outline-offset: 2px;
}

/*
 * The old flex column allowed the portrait to shrink to a few pixels when the
 * name/intro/commonality/actions needed more room (most visible on shorter
 * desktop viewports). Keep the portrait and action row stable; only the middle
 * profile facts are allowed to consume/scroll within the remaining space.
 */
.pn-nearby-person-card {
    min-height: 0;
    overflow: hidden;
}
.pn-nearby-person-card > .pn-nearby-person-photo {
    flex: 0 0 clamp(118px, 28%, 190px);
    height: clamp(118px, 28%, 190px) !important;
    min-height: clamp(118px, 28%, 190px);
    isolation: isolate;
    overflow: visible;
}
.pn-nearby-person-photo::after {
    z-index: 1;
    pointer-events: none;
}
.pn-nearby-person-photo .pn-distance-chip {
    z-index: 6;
}
.pn-nearby-person-photo .pn-mode-photo-chip {
    z-index: 20;
    isolation: isolate;
}
.pn-nearby-person-details {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.pn-nearby-person-details::-webkit-scrollbar {
    display: none;
}
.pn-nearby-person-card > .pn-nearby-actions {
    flex: 0 0 auto;
}

@media (min-width: 861px) and (max-height: 820px) {
    body.pn-app-viewport #pn-app .pn-nearby-person-card > .pn-nearby-person-photo {
        flex-basis: clamp(110px, 25%, 145px);
        height: clamp(110px, 25%, 145px) !important;
        min-height: clamp(110px, 25%, 145px);
        margin-bottom: 24px;
    }
    body.pn-app-viewport #pn-app .pn-nearby-person-details .pn-profile-intro {
        margin-top: 9px;
        line-height: 1.42;
    }
    body.pn-app-viewport #pn-app .pn-nearby-person-details .pn-friend-commonality {
        margin-top: 9px;
        padding: 8px 10px;
    }
    body.pn-app-viewport #pn-app .pn-nearby-person-details .pn-tags {
        margin-top: 9px;
    }
    body.pn-app-viewport #pn-app .pn-nearby-person-card > .pn-nearby-actions {
        padding-top: 11px;
    }
}

/* Tablet/mobile cards stay intentionally portrait-led with predictable height. */
@media (max-width: 860px) {
    .pn-mobile-nearby-photo {
        height: clamp(250px, 54vw, 380px);
        min-height: 250px;
        aspect-ratio: auto;
        isolation: isolate;
    }
    .pn-mobile-mode-badge {
        z-index: 20 !important;
    }
}
.pn-nearby-profile-photo-trigger {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.pn-nearby-profile-photo-trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pn-tab-accent, #7462f5) 35%, transparent);
    outline-offset: -4px;
}


/* === 2.15.99 Circle chat -> member profile nested modal stacking ====== */
/* The Circle chat intentionally sits above ordinary app modals. Promote only
   profiles launched from that chat, preserving the chat as the return layer. */
#pn-public-profile-modal.pn-profile-over-circle-chat {
    z-index: 100260 !important;
}

#pn-public-profile-modal.pn-profile-over-circle-chat .pn-profile-sheet {
    position: relative;
    z-index: 1;
}

/* v2.15.100 — map-first Circle discovery + personalised Circle filters */
#pn-app .pn-circle-map-search {
    position: absolute;
    z-index: 930;
    top: 18px;
    right: 18px;
    width: 46px;
    pointer-events: auto;
}
#pn-app .pn-circle-map-search.is-expanded {
    width: min(370px, calc(100% - 36px));
}
#pn-app .pn-circle-map-search-toggle {
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    color: #292934;
    box-shadow: 0 10px 28px rgba(34,29,45,.16);
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    backdrop-filter: blur(15px) saturate(130%);
    display: grid;
    place-items: center;
    cursor: pointer;
}
#pn-app .pn-circle-map-search-toggle .pn-icon-svg { width: 20px; height: 20px; }
#pn-app .pn-circle-map-search-panel {
    position: relative;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 46px rgba(34,29,45,.20);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}
#pn-app .pn-circle-map-search-panel[hidden] { display: none !important; }
#pn-app .pn-circle-map-search-field {
    min-height: 44px;
    padding: 0 40px 0 12px;
    border: 1px solid #ebe9f1;
    border-radius: 14px;
    background: #f8f7fb;
    display: flex;
    align-items: center;
    gap: 9px;
}
#pn-app .pn-circle-map-search-field > .pn-icon-svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #6657db;
}
#pn-app .pn-circle-map-search-field input {
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #25252e;
    font: inherit;
    font-size: 13px;
}
#pn-app .pn-circle-map-search-close {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #7a7884;
    display: grid;
    place-items: center;
    cursor: pointer;
}
#pn-app .pn-circle-map-search-close .pn-icon-svg { width: 16px; height: 16px; }
#pn-app .pn-circle-map-search-results {
    max-height: min(310px, 42vh);
    margin-top: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#pn-app .pn-circle-map-search-state {
    padding: 12px 10px;
    color: #777581;
    font-size: 11px;
    line-height: 1.45;
}
#pn-app .pn-circle-map-search-state.is-error { color: #b62e50; }
#pn-app .pn-circle-map-search-result {
    width: 100%;
    min-height: 54px;
    padding: 7px 8px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #282832;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
}
#pn-app .pn-circle-map-search-result:hover,
#pn-app .pn-circle-map-search-result:focus-visible { background: #f4f2fb; }
#pn-app .pn-circle-map-search-result-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: linear-gradient(145deg, #7868f2, #43c7bf);
    box-shadow: 0 7px 16px rgba(95,82,210,.18);
    display: grid;
    place-items: center;
    font-size: 20px;
}
#pn-app .pn-circle-map-search-result > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#pn-app .pn-circle-map-search-result strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 850;
}
#pn-app .pn-circle-map-search-result small {
    overflow: hidden;
    color: #85838d;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
}
#pn-app .pn-circle-map-search-result > i { color: #918d9a; font-style: normal; }

/* Circle pins are community anchors, deliberately visually distinct from the
 * red people-hotspot circles and from individual profile faces. */
#pn-map-container .pn-circle-map-leaflet-icon {
    width: 52px !important;
    height: 58px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
#pn-map-container .pn-circle-map-marker {
    position: relative;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,.96);
    border-radius: 18px 18px 18px 5px;
    background: linear-gradient(145deg, #7664f1 0%, #5d54de 50%, #39beb8 100%);
    box-shadow: 0 10px 22px rgba(53,44,120,.30), 0 0 0 1px rgba(73,62,160,.18);
    display: grid;
    place-items: center;
    transform: rotate(-4deg);
}
#pn-map-container .pn-circle-map-marker::after {
    content: '';
    position: absolute;
    left: 4px;
    bottom: -7px;
    width: 13px;
    height: 13px;
    border-left: 3px solid rgba(255,255,255,.96);
    border-bottom: 3px solid rgba(255,255,255,.96);
    border-radius: 0 0 0 5px;
    background: #5b55dd;
    transform: rotate(-41deg);
}
#pn-map-container .pn-circle-map-marker.is-joined {
    box-shadow: 0 11px 25px rgba(44,151,142,.30), 0 0 0 3px rgba(70,205,190,.20);
}
#pn-map-container .pn-circle-map-emoji {
    position: relative;
    z-index: 3;
    display: block;
    transform: rotate(4deg);
    font-size: 24px;
    line-height: 1;
}
#pn-map-container .pn-circle-map-marker > i {
    position: absolute;
    z-index: 4;
    right: -6px;
    bottom: -4px;
    width: 21px;
    height: 21px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #25243b;
    color: #fff;
    display: grid;
    place-items: center;
    transform: rotate(4deg);
}
#pn-map-container .pn-circle-map-marker > i .pn-icon-svg { width: 11px; height: 11px; }

#pn-app .pn-circle-category-chips button .pn-icon-svg {
    width: 11px;
    height: 11px;
    margin-right: 4px;
    vertical-align: -2px;
}
#pn-app .pn-circle-photo-distance {
    margin-top: 4px;
    color: #6459cf;
    display: block;
    font-size: 7px;
    font-weight: 800;
}

@media (max-width: 860px) {
    #pn-app .pn-circle-map-search { top: 12px; right: 12px; }
    #pn-app .pn-circle-map-search.is-expanded {
        top: 62px;
        width: calc(100% - 24px);
    }
    #pn-app .pn-circle-map-search-results { max-height: min(260px, 34vh); }
}

@media (max-width: 430px) {
    #pn-app .pn-circle-map-search.is-expanded { top: 58px; }
    #pn-app .pn-circle-map-search-panel { padding: 7px; border-radius: 17px; }
    #pn-app .pn-circle-map-search-result { min-height: 52px; grid-template-columns: 36px minmax(0,1fr) 14px; gap: 8px; }
    #pn-app .pn-circle-map-search-result-icon { width: 36px; height: 36px; border-radius: 12px; }
}

#pn-app .pn-circle-detail-join-note {
    margin-top: 3px;
    color: #765dcc;
    font-weight: 700;
}
#pn-app .pn-circle-quick-join:disabled {
    opacity: .48;
    cursor: not-allowed;
    filter: saturate(.55);
}

/* v2.15.101 — three-column desktop Circles + 10-at-a-time lazy catalogue */
@media (min-width: 861px) {
    #pn-app #pn-view-circles .pn-circles-reference-content {
        width: 100%;
        max-width: 1240px;
        margin-inline: auto;
        padding-inline: clamp(22px, 2.4vw, 34px);
    }

    #pn-app #pn-view-circles .pn-circles-photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(14px, 1.35vw, 20px);
    }

    #pn-app #pn-view-circles .pn-circle-photo-card {
        min-height: 292px;
        aspect-ratio: 0.92 / 1;
        border-radius: 20px;
    }

    #pn-app #pn-view-circles .pn-circle-photo-cover {
        height: 56%;
        min-height: 160px;
    }

    #pn-app #pn-view-circles .pn-circle-photo-cover > .pn-circle-cover-emoji {
        width: 62px;
        height: 62px;
        border-radius: 19px;
        font-size: 31px;
    }

    #pn-app #pn-view-circles .pn-circle-photo-copy {
        padding: 14px 14px 16px;
    }

    #pn-app #pn-view-circles .pn-circle-photo-card h3 {
        margin-bottom: 7px;
        font-size: 13px;
    }

    #pn-app #pn-view-circles .pn-circle-photo-copy > small,
    #pn-app #pn-view-circles .pn-circle-photo-members,
    #pn-app #pn-view-circles .pn-circle-photo-members b,
    #pn-app #pn-view-circles .pn-circle-photo-distance {
        font-size: 8px;
    }

    #pn-app #pn-view-circles .pn-circle-photo-members {
        margin-top: 9px;
    }

    #pn-app #pn-view-circles .pn-circle-joined-mark,
    #pn-app #pn-view-circles .pn-circle-quick-join {
        right: 12px;
        bottom: 12px;
        min-height: 25px;
        padding-inline: 10px;
        font-size: 8px;
    }
}

@media (min-width: 621px) and (max-width: 860px) {
    #pn-app #pn-view-circles .pn-circles-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }
}

.pn-circles-lazy-sentinel,
.pn-circles-lazy-complete {
    min-height: 68px;
    margin: 18px auto 4px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #777982;
    text-align: center;
}

.pn-circles-lazy-sentinel strong {
    color: #4e4f58;
    font-size: 9px;
    font-weight: 850;
}

.pn-circles-lazy-sentinel small,
.pn-circles-lazy-complete {
    font-size: 8px;
    font-weight: 720;
}

.pn-circles-lazy-spinner {
    width: 19px;
    height: 19px;
    margin-bottom: 3px;
    border: 2px solid color-mix(in srgb, var(--pn-tab-accent, #7462f5) 18%, transparent);
    border-top-color: var(--pn-tab-accent, #7462f5);
    border-radius: 50%;
    animation: pnCircleLazySpin .72s linear infinite;
}

@keyframes pnCircleLazySpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pn-circles-lazy-spinner { animation: none; border-top-color: currentColor; }
}

/* v2.15.103 — Circle icon photos + owner-controlled moderator branding. */
#pn-app .pn-circle-icon-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}

#pn-app .pn-circle-icon-emoji-glyph {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    line-height: 1;
}

#pn-app .pn-circle-chat-emoji.has-photo,
#pn-app .pn-circle-detail-icon.has-photo,
#pn-app .pn-circle-map-search-result-icon.has-photo,
#pn-app .pn-circle-icon-manager-preview.has-photo,
#pn-app .pn-circle-icon-picker-preview.has-photo {
    padding: 0;
    overflow: hidden;
    background: #ececf2;
}

#pn-app .pn-circle-chat-emoji.has-photo {
    border: 1px solid rgba(88,82,105,.12);
    box-shadow: 0 4px 12px rgba(38,34,51,.12);
}

#pn-app .pn-circle-detail-icon.has-photo {
    background: #ececf2;
}

#pn-app .pn-circle-detail-cover-emoji.has-photo {
    width: 76px;
    height: 76px;
    border: 3px solid rgba(255,255,255,.86);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255,255,255,.2);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    filter: none;
}

#pn-app .pn-circle-photo-cover > .pn-circle-cover-emoji.has-photo {
    padding: 0;
    overflow: hidden;
    background: #ececf2;
    backdrop-filter: none;
}

#pn-app .pn-circle-photo-cover.has-hero .pn-circle-cover-emoji:not(.has-photo) {
    opacity: 0;
    pointer-events: none;
}

#pn-app .pn-circle-photo-cover.has-hero .pn-circle-cover-emoji.has-photo {
    position: absolute;
    z-index: 3;
    left: 9px;
    bottom: 9px;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255,255,255,.94);
    border-radius: 14px;
    opacity: 1;
    pointer-events: none;
    box-shadow: 0 7px 18px rgba(13,18,29,.2);
}

#pn-map-container .pn-circle-map-marker.has-photo .pn-circle-map-emoji {
    width: 37px;
    height: 37px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 13px;
    background: rgba(255,255,255,.16);
    box-shadow: 0 5px 13px rgba(25,28,54,.16);
}

#pn-map-container .pn-circle-map-marker.has-photo .pn-circle-map-emoji .pn-circle-icon-image {
    transform: scale(1.08);
}

#pn-app .pn-circle-map-search-result-icon.has-photo {
    border: 1px solid rgba(76,70,101,.1);
}

#pn-app .pn-circle-icon-picker {
    padding: 13px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: #fbfbfd;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
}

#pn-app .pn-circle-icon-picker-preview,
#pn-app .pn-circle-icon-manager-preview {
    width: 72px;
    height: 72px;
    border: 2px solid #fff;
    border-radius: 23px;
    background: linear-gradient(145deg, #7868f2, #43c7bf);
    color: #fff;
    box-shadow: 0 9px 22px rgba(72,61,145,.16);
    display: grid;
    place-items: center;
    font-size: 34px;
}

#pn-app .pn-circle-icon-picker-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

#pn-app .pn-circle-icon-picker-copy > strong {
    color: var(--pn-ink);
    font-size: 11px;
}

#pn-app .pn-circle-icon-picker-copy > small {
    color: var(--pn-muted);
    font-size: 9px;
    line-height: 1.45;
}

#pn-app .pn-circle-icon-picker-actions {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#pn-app .pn-circle-icon-picker-actions .is-active {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 45%, var(--pn-line));
    background: var(--pn-mode-soft, var(--pn-primary-soft));
    color: var(--pn-mode-accent, var(--pn-primary));
}

#pn-app .pn-circle-icon-sheet {
    width: min(100%, 520px);
}

#pn-app .pn-circle-icon-manager {
    margin-top: 17px;
    display: grid;
    gap: 14px;
}

#pn-app .pn-circle-icon-manager-preview {
    width: 96px;
    height: 96px;
    margin: 0 auto 2px;
    border-radius: 29px;
    font-size: 44px;
}

#pn-app .pn-circle-icon-manager-actions {
    display: grid;
    gap: 8px;
}

#pn-app .pn-circle-icon-manager-actions .pn-connection-action.is-active {
    border-color: color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 36%, var(--pn-line));
    background: var(--pn-mode-soft, var(--pn-primary-soft));
}

#pn-app .pn-circle-branding-permission {
    margin-top: 2px;
}

@media (max-width: 560px) {
    #pn-app .pn-circle-icon-picker {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }
    #pn-app .pn-circle-icon-picker-preview {
        width: 58px;
        height: 58px;
        border-radius: 19px;
        font-size: 28px;
    }
    #pn-app .pn-circle-icon-picker-actions {
        gap: 5px;
    }
}

/* Circle icon manager is launched from the Circle chat options, so it must sit
 * above the still-open chat while preserving the chat underneath. */
#pn-circle-icon-modal { z-index: 100100 !important; }


/* v2.15.104 — Circles header membership + management views. */
#pn-app .pn-circle-library-tabs {
    position: relative;
    z-index: 2;
    margin: 2px 0 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
#pn-app .pn-circle-library-tabs button {
    min-width: 0;
    min-height: 38px;
    padding: 5px 9px 5px 11px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 14px;
    background: rgba(255,255,255,.13);
    color: rgba(255,255,255,.94);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font: inherit;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
#pn-app .pn-circle-library-tabs button:hover,
#pn-app .pn-circle-library-tabs button:focus-visible {
    background: rgba(255,255,255,.21);
    border-color: rgba(255,255,255,.54);
}
#pn-app .pn-circle-library-tabs button:focus-visible {
    outline: 2px solid rgba(255,255,255,.88);
    outline-offset: 2px;
}
#pn-app .pn-circle-library-tabs button.is-active {
    background: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.98);
    color: #e33e69;
    box-shadow: 0 7px 18px rgba(128,31,60,.16);
}
#pn-app .pn-circle-library-tabs button > span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 850;
}
#pn-app .pn-circle-library-tabs .pn-icon-svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}
#pn-app .pn-circle-library-tabs b {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.17);
    color: inherit;
    display: grid;
    place-items: center;
    font-size: 8px;
    font-weight: 900;
}
#pn-app .pn-circle-library-tabs button.is-active b {
    background: rgba(227,62,105,.10);
}
@media (min-width: 861px) {
    #pn-app .pn-circle-library-tabs {
        width: min(420px, 62%);
    }
}
@media (max-width: 620px) {
    #pn-app .pn-circle-library-tabs {
        margin-bottom: 10px;
        gap: 6px;
    }
    #pn-app .pn-circle-library-tabs button {
        min-height: 36px;
        border-radius: 13px;
    }
    #pn-app .pn-circle-library-tabs button > span {
        font-size: 8px;
    }
}


/* v2.15.105 — existing Circle avatar editing for owners / permitted moderators. */
#pn-circle-icon-modal {
    z-index: 100115 !important;
}

#pn-app .pn-circle-detail-icon-wrap,
#pn-app .pn-circle-chat-icon-wrap {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
}

#pn-app .pn-circle-avatar-edit {
    position: absolute;
    z-index: 8;
    right: -6px;
    bottom: -6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pn-mode-accent, var(--pn-primary));
    color: #fff;
    box-shadow: 0 5px 14px rgba(28,24,45,.22);
    display: grid;
    place-items: center;
    cursor: pointer;
}

#pn-app .pn-circle-avatar-edit[hidden] { display: none !important; }
#pn-app .pn-circle-avatar-edit .pn-icon-svg { width: 14px; height: 14px; }
#pn-app .pn-circle-avatar-edit.is-chat {
    width: 23px;
    height: 23px;
    right: -5px;
    bottom: -5px;
    border-width: 2px;
}
#pn-app .pn-circle-avatar-edit.is-chat .pn-icon-svg { width: 11px; height: 11px; }
#pn-app .pn-circle-avatar-edit:hover { filter: brightness(.96); }
#pn-app .pn-circle-avatar-edit:focus-visible { outline: 3px solid color-mix(in srgb, var(--pn-mode-accent, var(--pn-primary)) 30%, transparent); outline-offset: 2px; }

@media (max-width: 680px) {
    #pn-app .pn-circle-avatar-edit { width: 26px; height: 26px; right: -5px; bottom: -5px; }
    #pn-app .pn-circle-avatar-edit.is-chat { width: 22px; height: 22px; }
}

#pn-app .pn-circle-detail-icon-wrap {
    width: 64px;
    height: 64px;
    margin-top: -47px;
}
#pn-app .pn-circle-detail-icon-wrap .pn-circle-detail-icon {
    margin-top: 0;
}
#pn-app .pn-circle-chat-icon-wrap {
    width: 42px;
    height: 42px;
}

/* v2.15.106 — Circle avatar ring + bottom-centre edit badge. */
#pn-app .pn-circle-detail-icon-wrap,
#pn-app .pn-circle-chat-icon-wrap {
    overflow: visible;
}

/* Uploaded Circle icons are avatars: keep them circular and visibly separated
 * from any hero/header artwork with a permanent white ring. */
#pn-app .pn-circle-detail-icon.has-photo,
#pn-app .pn-circle-chat-emoji.has-photo,
#pn-app .pn-circle-map-search-result-icon.has-photo,
#pn-app .pn-circle-icon-manager-preview.has-photo,
#pn-app .pn-circle-icon-picker-preview.has-photo,
#pn-app .pn-circle-photo-cover > .pn-circle-cover-emoji.has-photo,
#pn-map-container .pn-circle-map-marker.has-photo .pn-circle-map-emoji {
    border-radius: 50% !important;
    border: 3px solid #fff !important;
    background: #ececf2;
    overflow: hidden;
    box-sizing: border-box;
}

#pn-app .pn-circle-detail-icon.has-photo {
    border-width: 4px !important;
    box-shadow: 0 8px 21px rgba(40,35,55,.18);
}

#pn-app .pn-circle-chat-emoji.has-photo {
    border-width: 3px !important;
    box-shadow: 0 4px 12px rgba(38,34,51,.14);
}

#pn-app .pn-circle-photo-cover.has-hero .pn-circle-cover-emoji.has-photo {
    border-radius: 50% !important;
    border: 3px solid #fff !important;
}

#pn-app .pn-circle-icon-image {
    border-radius: 50% !important;
}

/* Keep the edit action attached to the avatar itself.  It overlaps the white
 * ring at the bottom centre instead of rendering as a separate button below. */
#pn-app .pn-circle-avatar-edit {
    z-index: 12;
    left: 50%;
    right: auto;
    bottom: -10px;
    width: 29px;
    height: 29px;
    transform: translateX(-50%);
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--pn-mode-accent, var(--pn-primary));
    color: #fff;
    box-shadow: 0 5px 14px rgba(28,24,45,.24);
    line-height: 1;
}

#pn-app .pn-circle-avatar-edit.is-chat {
    left: 50%;
    right: auto;
    bottom: -8px;
    width: 23px;
    height: 23px;
    transform: translateX(-50%);
    border-width: 2px;
}

#pn-app .pn-circle-avatar-edit:hover {
    transform: translateX(-50%) translateY(-1px);
}

#pn-app .pn-circle-avatar-edit:active {
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 680px) {
    #pn-app .pn-circle-avatar-edit {
        left: 50%;
        right: auto;
        bottom: -9px;
        width: 27px;
        height: 27px;
        transform: translateX(-50%);
    }
    #pn-app .pn-circle-avatar-edit.is-chat {
        left: 50%;
        right: auto;
        bottom: -7px;
        width: 22px;
        height: 22px;
        transform: translateX(-50%);
    }
}

/* =========================================================
   2.15.111 — My Connections / explicit friend requests
   ========================================================= */
.pn-chat-library-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
    padding: 5px;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    background: #f3f3f7;
}

.pn-chat-library-tabs > button {
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--pn-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    position: relative;
}

.pn-chat-library-tabs > button.is-active {
    background: #fff;
    color: var(--pn-ink);
    box-shadow: 0 5px 16px rgba(32, 28, 42, .08);
}

.pn-chat-library-tabs .pn-icon-svg { width: 17px; height: 17px; }

#pn-friend-request-tab-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pn-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
}

#pn-friend-request-tab-badge[hidden] { display: none !important; }
.pn-chat-library-pane[hidden] { display: none !important; }

.pn-friend-request-section,
.pn-my-connections-section,
.pn-friend-sent-section {
    margin: 0 0 20px;
}

.pn-friend-request-section {
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--pn-primary) 18%, #e8e5ec);
    border-radius: 18px;
    background: color-mix(in srgb, var(--pn-primary-soft) 58%, #fff);
}

.pn-friend-total {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f0eef3;
    color: var(--pn-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

.pn-friend-list {
    display: grid;
    gap: 9px;
}

.pn-friend-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--pn-line);
    border-radius: 17px;
    background: #fff;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
}

.pn-friend-card.is-request {
    border-color: color-mix(in srgb, var(--pn-primary) 22%, #e5e2e9);
}

.pn-friend-avatar {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 18px;
    background: #ececf1 center / cover no-repeat;
    box-shadow: 0 5px 16px rgba(30, 25, 39, .12);
    position: relative;
    cursor: pointer;
}

.pn-friend-mode {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 19px;
    height: 19px;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    background: #ff4b78;
}
.pn-friend-mode.is-platonic { background: #7462f5; }
.pn-friend-mode.is-business { background: #18a79b; }
.pn-friend-mode .pn-icon-svg { width: 9px; height: 9px; }

.pn-friend-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.pn-friend-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pn-ink);
    font-size: 12px;
    font-weight: 900;
}
.pn-friend-copy small,
.pn-friend-activity {
    color: var(--pn-muted);
    font-size: 9px;
    line-height: 1.35;
}
.pn-friend-activity.is-online { color: #139c72; font-weight: 800; }

.pn-friend-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.pn-friend-actions .pn-btn { white-space: nowrap; }
.pn-friend-remove { font-size: 9px; color: var(--pn-muted); }

.pn-chat-friend-button {
    position: relative;
    transition: transform .16s ease, background .16s ease, color .16s ease;
}
.pn-chat-friend-button:hover:not(:disabled) { transform: translateY(-1px); }
.pn-chat-friend-button.is-incoming {
    color: #fff;
    background: var(--pn-primary);
}
.pn-chat-friend-button.is-incoming::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ff4b78;
}
.pn-chat-friend-button.is-friends {
    color: #fff;
    background: #1ca97d;
}
.pn-chat-friend-button.is-pending,
.pn-chat-friend-button.is-ignored {
    opacity: .58;
}

#pn-friend-request-modal { z-index: 100110 !important; }
.pn-friend-request-sheet { max-width: 430px; }
.pn-friend-request-symbol {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, var(--pn-primary), var(--pn-primary-deep));
    display: grid;
    place-items: center;
}
.pn-friend-request-symbol .pn-icon-svg { width: 25px; height: 25px; }
.pn-friend-request-sheet-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}

@media (max-width: 620px) {
    .pn-chats-community-view { padding: 12px 10px 24px; }
    .pn-chat-library-tabs { margin-bottom: 14px; }
    .pn-friend-card {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 10px;
    }
    .pn-friend-avatar { width: 48px; height: 48px; border-radius: 16px; }
    .pn-friend-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
        padding-top: 2px;
    }
    .pn-friend-actions .pn-btn { flex: 1 1 0; }
    .pn-friend-actions .pn-text-button { margin-left: auto; margin-right: auto; }
    .pn-chat-menu { gap: 3px; }
    .pn-chat-menu .pn-icon-button { width: 34px; height: 34px; }
}


/* v2.15.114 — anonymous Ghost Mode safety presence.
 * This is intentionally not styled like a profile marker: there is no photo,
 * name, connection colour or action affordance that could imply identity. */
.pn-ghost-presence-marker {
    background: transparent !important;
    border: 0 !important;
}
.pn-ghost-presence-orb {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.34) 0 9%, rgba(123,97,255,.96) 34%, rgba(83,73,164,.92) 64%, rgba(31,25,68,.94) 100%);
    border: 2px solid rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(29,23,72,.28), 0 0 0 5px rgba(123,97,255,.13);
    pointer-events: auto;
}
.pn-ghost-presence-orb > span {
    position: relative;
    z-index: 2;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.22));
}
.pn-ghost-presence-orb svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}
.pn-ghost-presence-orb > i {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(123,97,255,.48);
    animation: pnGhostPresenceDrift 3.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pnGhostPresenceDrift {
    0%, 100% { transform: scale(.88); opacity: .25; }
    50% { transform: scale(1.08); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
    .pn-ghost-presence-orb > i { animation: none; opacity: .45; }
}

/* === v2.17.0 daily growth, liquidity and acquisition metrics === */
.pn-admin-daily-toolbar {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e3e6ed;
    border-radius: 18px;
    background: #fff;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.pn-admin-daily-toolbar label { min-width: 190px; }
.pn-admin-daily-toolbar label span,
.pn-admin-spend-form label > span {
    display: block;
    margin-bottom: 5px;
    color: #767c8b;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pn-admin-daily-toolbar input,
.pn-admin-spend-form input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #dce1e9;
    border-radius: 12px;
    padding: 0 11px;
    background: #fff;
    color: #252a3c;
}
.pn-admin-daily-section {
    margin-bottom: 14px;
    border: 1px solid #e4e7ee;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}
.pn-admin-daily-section > header {
    padding: 14px 16px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0f4;
}
.pn-admin-daily-section > header span {
    display: block;
    color: #8a909d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pn-admin-daily-section > header strong {
    display: block;
    margin-top: 3px;
    color: #24283a;
    font-size: 14px;
}
.pn-admin-daily-section > header > small { color: #9297a4; font-size: 9px; }
.pn-admin-daily-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 12px;
}
.pn-admin-daily-grid .pn-admin-daily-metric { background: #f8f9fb; box-shadow: none; }
.pn-admin-daily-two-col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 14px; }
.pn-admin-retention-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 12px; }
.pn-admin-retention-grid article { padding: 14px; border-radius: 16px; background: #f7f8fb; border: 1px solid #e8eaf0; }
.pn-admin-retention-grid small,.pn-admin-retention-grid em { display: block; color: #8b909d; font-size: 9px; font-style: normal; }
.pn-admin-retention-grid strong { display: block; margin: 5px 0; color: #22273a; font-size: 25px; }
.pn-admin-data-table { overflow-x: auto; }
.pn-admin-data-head,.pn-admin-data-row { min-width: 560px; display: grid; grid-template-columns: minmax(150px,1.5fr) repeat(4,minmax(76px,.7fr)); gap: 10px; align-items: center; }
.pn-admin-data-head { padding: 9px 13px; background: #f3f5f8; color: #858b99; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.pn-admin-data-row { padding: 10px 13px; border-top: 1px solid #edf0f4; color: #394054; font-size: 10px; }
.pn-admin-data-row > span:first-child strong,.pn-admin-data-row > span:first-child small { display: block; }
.pn-admin-data-row > span:first-child small { margin-top: 2px; color: #969ba8; font-size: 8px; }
.pn-admin-unit-economics { padding: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.pn-admin-unit-economics .pn-admin-metric { background: #f8f9fb; box-shadow: none; }
.pn-admin-spend-form { margin: 12px; padding: 13px; border-radius: 16px; border: 1px solid #e5e8ef; background: #f8f9fb; }
.pn-admin-spend-form > strong { display: block; margin-bottom: 10px; color: #2c3144; font-size: 11px; }
.pn-admin-spend-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.pn-admin-spend-form label small { text-transform: none; font-weight: 600; letter-spacing: 0; }
.pn-admin-spend-actions { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.pn-admin-spend-actions small { color: #8b919f; font-size: 8px; }
.pn-admin-definitions > div { padding: 12px 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 16px; }
.pn-admin-definitions p { margin: 0; color: #717786; font-size: 9px; line-height: 1.5; }
.pn-admin-definitions p strong { color: #363c51; }
.pn-admin-tracking-warning { margin-bottom: 14px; padding: 11px 13px; display: grid; gap: 3px; border: 1px solid #ead8aa; border-radius: 15px; background: #fff9eb; color: #6f5b2c; }
.pn-admin-tracking-warning strong { font-size: 10px; }
.pn-admin-tracking-warning span { font-size: 9px; line-height: 1.45; }

@media (max-width: 980px) {
    .pn-admin-daily-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .pn-admin-daily-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .pn-admin-daily-toolbar { align-items: stretch; }
    .pn-admin-daily-toolbar label { min-width: 0; flex: 1; }
    .pn-admin-daily-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .pn-admin-retention-grid,.pn-admin-unit-economics { grid-template-columns: 1fr; }
    .pn-admin-spend-fields,.pn-admin-definitions > div { grid-template-columns: 1fr; }
    .pn-admin-spend-actions { align-items: stretch; flex-direction: column; }
    .pn-admin-spend-actions .pn-btn { width: 100%; }
}

/* v2.17.0 progressive onboarding + profile completion */
.pn-onboarding-photo strong em,
.pn-permission-copy strong em {
    margin-left: 6px;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .62;
}

.pn-onboarding-interest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pn-onboarding-privacy-grid {
    display: grid;
    gap: 12px;
    margin: 20px 0 16px;
}

.pn-onboarding-privacy-choice {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 13px;
    min-height: 88px;
    padding: 15px 16px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pn-onboarding-privacy-choice:hover,
.pn-onboarding-privacy-choice.is-selected {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, .28);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .10);
    background: #fff;
}

.pn-onboarding-privacy-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pn-onboarding-privacy-choice > span:nth-of-type(2) {
    display: grid;
    gap: 4px;
}

.pn-onboarding-privacy-choice > span:nth-of-type(2) strong {
    font-size: 15px;
    color: #0f172a;
}

.pn-onboarding-privacy-choice > span:nth-of-type(2) small {
    line-height: 1.45;
    color: #64748b;
}

.pn-onboarding-privacy-choice > i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: transparent;
}

.pn-onboarding-privacy-choice.is-selected > i {
    background: #0f172a;
    color: #fff;
}

.pn-onboarding-core-complete {
    display: grid;
    gap: 4px;
    margin: 14px 0 18px;
    padding: 14px 15px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .045);
    color: #0f172a;
}

.pn-onboarding-core-complete strong { font-size: 14px; }
.pn-onboarding-core-complete span { font-size: 12px; line-height: 1.45; color: #64748b; }

.pn-profile-progress-nudge {
    position: relative;
    z-index: 30;
    width: min(760px, calc(100% - 28px));
    margin: 10px auto 2px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 18px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    box-shadow: 0 18px 45px rgba(15,23,42,.20);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .22s ease, transform .22s ease;
    text-align: left;
    cursor: pointer;
}

.pn-profile-progress-nudge.is-visible { opacity: 1; transform: translateY(0); }
.pn-profile-progress-nudge > span:nth-child(2) { display: grid; gap: 2px; }
.pn-profile-progress-nudge > span:nth-child(2) strong { font-size: 13px; }
.pn-profile-progress-nudge > span:nth-child(2) small { color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.35; }
.pn-profile-progress-nudge > i { display: grid; place-items: center; }

.pn-profile-progress-ring {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(rgba(255,255,255,.98) var(--pn-profile-progress, 45%), rgba(255,255,255,.15) 0);
    position: relative;
}

.pn-profile-progress-ring::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: #0f172a;
}

.pn-profile-progress-ring b { position: relative; z-index: 1; font-size: 10px; }

.pn-profile-hero-card {
    position: relative;
}

.pn-profile-completion {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pn-profile-completion > b {
    display: grid;
    place-items: center;
    min-height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,.13);
    font-size: 13px;
}

.pn-profile-completion > span { display: grid; gap: 2px; }
.pn-profile-completion > span strong { font-size: 12px; }
.pn-profile-completion > span small { opacity: .72; font-size: 10px; line-height: 1.35; }

@media (max-width: 640px) {
    .pn-onboarding-interest-grid { grid-template-columns: 1fr; }
    .pn-onboarding-privacy-choice { grid-template-columns: 42px minmax(0, 1fr) 24px; padding: 13px; }
    .pn-profile-progress-nudge { width: calc(100% - 18px); margin-top: 7px; border-radius: 16px; }
}

/* v2.18.0 — first-session activation objective */
.pn-first-session-objective{margin:12px 16px 4px;padding:16px;border:1px solid rgba(92,86,245,.16);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,244,255,.97));box-shadow:0 14px 38px rgba(29,34,52,.09);position:relative;overflow:hidden}
.pn-first-session-objective[hidden]{display:none!important}.pn-first-session-objective:before{content:"";position:absolute;inset:-80px auto auto -50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(103,92,245,.14),rgba(103,92,245,0) 70%);pointer-events:none}
.pn-first-session-objective-copy{position:relative;z-index:1}.pn-first-session-objective-copy h2{margin:4px 0 5px;font-size:clamp(20px,2.4vw,30px);line-height:1.08;color:#202333}.pn-first-session-objective-copy p{margin:0;color:#686d7a;font-size:13px;line-height:1.45}
.pn-first-session-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px;position:relative;z-index:1}.pn-first-session-card{min-width:0;border:1px solid #e7e8ef;border-radius:18px;background:#fff;padding:9px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px rgba(29,34,52,.06)}
.pn-first-session-card-media{height:94px;border-radius:13px;background:#eef0f5 center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative;font-size:32px;overflow:hidden}.pn-first-session-card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(21,23,33,.28))}.pn-first-session-card-media b{position:absolute;top:7px;left:7px;z-index:2;width:22px;height:22px;border-radius:50%;background:#fff;color:#202333;display:grid;place-items:center;font-size:10px;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.pn-first-session-card-copy{display:flex;flex-direction:column;gap:2px;min-height:62px}.pn-first-session-card-copy small{font-size:8px;letter-spacing:.06em;font-weight:850;color:#8b90a0}.pn-first-session-card-copy strong{font-size:12px;color:#252938;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pn-first-session-card-copy span{font-size:9px;line-height:1.35;color:#777c89;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pn-first-session-card .pn-btn{width:100%;margin-top:auto}
.pn-first-session-empty{grid-column:1/-1;padding:18px;border:1px dashed #d9dbe6;border-radius:16px;display:flex;flex-direction:column;gap:4px;color:#727785}.pn-first-session-empty strong{color:#2a2e3d}
.pn-founding-profile-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:7px 0 3px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(10px);color:#fff;font-size:9px;font-weight:850;letter-spacing:.02em}.pn-founding-profile-badge svg{width:12px;height:12px}.pn-founding-mini-badge{display:inline-flex!important;width:max-content;margin:3px 0;padding:3px 6px;border-radius:999px;background:#f1efff;color:#5c54d9!important;font-size:8px!important;font-weight:850!important;line-height:1.1!important}

/* v2.18.0 — Founding Member launch operations */
.pn-founding-admin-intro>p{padding:0 16px 14px;margin:0;color:#737887;font-size:12px;line-height:1.5}.pn-founding-admin-list{display:grid;gap:10px;padding:12px}.pn-founding-admin-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid #e8eaf0;border-radius:16px;background:#fff}.pn-founding-admin-card>div:first-child{display:flex;flex-direction:column;gap:3px}.pn-founding-admin-card small{font-size:8px;font-weight:850;letter-spacing:.08em;color:#8f94a2}.pn-founding-admin-card strong{font-size:13px;color:#282c3b}.pn-founding-admin-card span{font-size:10px;color:#777c89}.pn-founding-admin-card.is-active{border-color:rgba(65,163,111,.28);box-shadow:inset 3px 0 0 #42a871}.pn-founding-admin-benefits{display:flex;gap:5px;flex-wrap:wrap}.pn-founding-admin-benefits span{padding:5px 7px;border-radius:999px;background:#f5f6f9;color:#626775;font-size:8px;font-weight:800}.pn-founding-editor{margin:12px 0}.pn-founding-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px}.pn-founding-form label{display:flex;flex-direction:column;gap:5px}.pn-founding-form label>span{font-size:9px;font-weight:800;color:#747987}.pn-founding-form input,.pn-founding-form select{width:100%;min-height:38px;border:1px solid #dfe2e9;border-radius:10px;padding:8px 10px;background:#fff;color:#282c3b}.pn-founding-form .pn-btn{align-self:end;min-height:38px}
@media(max-width:900px){.pn-first-session-results{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:3px}.pn-first-session-card{flex:0 0 min(72vw,230px);scroll-snap-align:start}.pn-founding-admin-card{grid-template-columns:1fr}.pn-founding-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pn-first-session-objective{margin:9px 10px 2px;padding:13px;border-radius:20px}.pn-first-session-objective-copy h2{font-size:20px}.pn-first-session-card{flex-basis:72vw}.pn-founding-form{grid-template-columns:1fr}}

/* ==========================================================================
   Nudjee 2.19.0 — Control Tower Support & Safety + account restrictions
   ========================================================================== */
.pn-admin-support-summary {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.pn-admin-support-stat {
    padding:15px;
    border:1px solid #e4e7ee;
    border-radius:18px;
    background:#fff;
    box-shadow:0 7px 20px rgba(31,37,54,.045);
}
.pn-admin-support-stat small,.pn-admin-support-stat span { display:block;color:#8b909e;font-size:9px; }
.pn-admin-support-stat small { font-weight:850;text-transform:uppercase;letter-spacing:.07em; }
.pn-admin-support-stat strong { display:block;margin:6px 0 2px;color:#202437;font-size:24px;line-height:1; }
.pn-support-section { margin-bottom:14px; }
.pn-support-case-list { display:grid;gap:8px;padding:12px; }
.pn-support-case {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:13px 14px;
    border:1px solid #e6e8ef;
    border-radius:16px;
    background:#fff;
}
.pn-support-case-main { min-width:0; }
.pn-support-case-main > strong,.pn-support-case-main > em,.pn-support-case-main > p,.pn-support-case-main > small { display:block; }
.pn-support-case-main > strong { margin-top:6px;color:#242839;font-size:14px; }
.pn-support-case-main > strong small { color:#9a9eaa;font-size:9px;font-weight:700; }
.pn-support-case-main > em { margin-top:2px;color:#858a97;font-size:9px;font-style:normal; }
.pn-support-case-main > p { margin:8px 0 5px;color:#4e5568;font-size:11px;line-height:1.45;white-space:normal; }
.pn-support-case-main > small { color:#9196a3;font-size:9px; }
.pn-support-status {
    display:inline-flex;
    width:max-content;
    min-height:22px;
    padding:0 8px;
    align-items:center;
    border-radius:999px;
    background:#eef0f5;
    color:#6e7484;
    font-size:8px;
    font-weight:900;
    letter-spacing:.07em;
}
.pn-support-status.is-open,.pn-support-status.is-blocked { background:#fff0f2;color:#b4233c; }
.pn-support-status.is-reviewing { background:#fff8df;color:#8a6410; }
.pn-support-status.is-resolved { background:#eaf8f3;color:#14715f; }
.pn-support-status.is-dismissed { background:#eef0f5;color:#6f7481; }
.pn-support-status.is-active { background:#3a2945;color:#fff; }
.pn-support-restriction-case.is-permanent { border-color:#efd2d8;background:#fffafb; }
.pn-support-restriction-case.is-temporary { border-color:#e5ddf2;background:#fdfbff; }
.pn-support-case-actions { display:flex;gap:8px;align-items:flex-end; }
.pn-support-case-actions label { display:grid;gap:4px; }
.pn-support-case-actions label small { color:#9095a2;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }
.pn-support-case-actions select { min-height:34px;border:1px solid #dce0e8;border-radius:10px;background:#fff;padding:0 28px 0 9px;color:#34394a;font-size:10px;font-weight:750; }
.pn-support-history { display:grid;padding:12px;gap:7px; }
.pn-support-history-row { display:grid;grid-template-columns:.85fr 1.7fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid #e8eaf0;border-radius:13px;background:#fff; }
.pn-support-history-row span strong,.pn-support-history-row span small { display:block; }
.pn-support-history-row span small,.pn-support-history-row time { color:#9095a2;font-size:9px; }
.pn-support-history-row span:nth-child(2) small { margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px; }

.pn-moderation-action-sheet { max-width:620px; }
.pn-moderation-form { display:grid;gap:13px;margin-top:16px; }
.pn-moderation-type-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.pn-moderation-choice { position:relative;display:block;cursor:pointer; }
.pn-moderation-choice input { position:absolute;opacity:0;pointer-events:none; }
.pn-moderation-choice span { display:block;height:100%;padding:13px;border:1px solid #e0e3ea;border-radius:15px;background:#fff;transition:.16s ease; }
.pn-moderation-choice strong,.pn-moderation-choice small { display:block; }
.pn-moderation-choice strong { color:#303548;font-size:12px; }
.pn-moderation-choice small { margin-top:3px;color:#8a909d;font-size:9px;line-height:1.35; }
.pn-moderation-choice.is-selected span { border-color:#6f5ae8;background:#f5f2ff;box-shadow:0 0 0 2px rgba(111,90,232,.08); }
.pn-moderation-duration { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.pn-moderation-preview { padding:13px 14px;border:1px solid #eadde2;border-radius:15px;background:linear-gradient(145deg,#fffafb,#f8f5ff); }
.pn-moderation-preview small,.pn-moderation-preview strong,.pn-moderation-preview p { display:block; }
.pn-moderation-preview small { color:#9b7380;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.07em; }
.pn-moderation-preview strong { margin-top:4px;color:#4b2835;font-size:13px; }
.pn-moderation-preview p { margin:5px 0 0;color:#7b6670;font-size:10px;line-height:1.4; }

.pn-restriction-screen {
    min-height:100dvh;
    position:fixed;
    inset:0;
    z-index:11000;
    overflow:hidden;
    display:grid;
    place-items:center;
    padding:28px;
    background:
        radial-gradient(circle at 20% 5%,rgba(132,93,232,.20),transparent 31%),
        radial-gradient(circle at 86% 88%,rgba(255,72,111,.14),transparent 28%),
        linear-gradient(145deg,#11131d,#1b1e2c 54%,#161822);
}
.pn-restriction-glow { position:absolute;inset:auto auto -160px -120px;width:420px;height:420px;border-radius:50%;background:rgba(127,91,235,.15);filter:blur(35px);pointer-events:none; }
.pn-restriction-card {
    position:relative;
    z-index:1;
    width:min(520px,100%);
    padding:30px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:28px;
    background:rgba(255,255,255,.96);
    box-shadow:0 32px 90px rgba(0,0,0,.34);
    text-align:center;
}
.pn-restriction-brand { display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:24px;color:#252938;font-size:16px; }
.pn-restriction-brand .pn-brand-mark { width:34px;height:34px; }
.pn-restriction-icon { width:58px;height:58px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:#fff0f2;color:#b4233c;font-size:26px;font-weight:950;box-shadow:inset 0 0 0 1px #f6d7de; }
.pn-restriction-card .pn-eyebrow { color:#8e7480; }
.pn-restriction-card h1 { margin:7px 0 9px;color:#272a38;font-size:clamp(28px,5vw,38px);letter-spacing:-.035em;line-height:1; }
.pn-restriction-card > p { margin:0 auto;color:#747986;line-height:1.55;max-width:430px; }
.pn-restriction-reason,.pn-restriction-expiry { margin-top:18px;padding:15px;border:1px solid #e8e8ed;border-radius:16px;background:#f8f8fb;text-align:left; }
.pn-restriction-reason small,.pn-restriction-expiry small { display:block;margin-bottom:4px;color:#9599a5;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.07em; }
.pn-restriction-reason strong,.pn-restriction-expiry strong { display:block;color:#3c4050;font-size:12px;line-height:1.45; }
.pn-restriction-reference { margin:13px 0 18px !important;color:#a1a5af !important;font-size:9px; }
.pn-restriction-card .pn-btn { width:100%;justify-content:center;text-decoration:none; }

@media (max-width:900px) {
    .pn-admin-support-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .pn-admin-support-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pn-support-case { grid-template-columns:1fr;align-items:stretch; }
    .pn-support-case-actions { align-items:stretch;flex-direction:column; }
    .pn-support-case-actions .pn-btn,.pn-support-case-actions label,.pn-support-case-actions select { width:100%; }
    .pn-support-history-row { grid-template-columns:1fr;gap:3px; }
    .pn-support-history-row time { margin-top:2px; }
    .pn-moderation-type-grid,.pn-moderation-duration { grid-template-columns:1fr; }
    .pn-restriction-screen { padding:14px; }
    .pn-restriction-card { padding:24px 18px;border-radius:24px; }
}

.pn-admin-support-toolbar { margin-bottom:8px; }
.pn-support-member-results { display:grid;gap:7px;margin-bottom:14px; }
.pn-support-member-results article { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid #e4e7ed;border-radius:14px;background:#fff; }
.pn-support-member-results span { min-width:0; }
.pn-support-member-results strong,.pn-support-member-results em { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pn-support-member-results strong { color:#292d3d;font-size:12px; }
.pn-support-member-results strong small { color:#969aa6;font-size:9px; }
.pn-support-member-results em { margin-top:2px;color:#8e939f;font-size:9px;font-style:normal; }
@media (max-width:680px){.pn-support-member-results article{align-items:stretch;flex-direction:column}.pn-support-member-results .pn-btn{width:100%}}

/* ========================================================================== 
   Nudjee 2.19.5 — modal integrity, typography and disabled Business education
   ========================================================================== */

/* The fullscreen plugin template intentionally removes theme CSS. Recreate the
   accessibility helper that WordPress themes normally provide so assistive copy
   never becomes visible UI (for example the Circles search label). */
#pn-app .screen-reader-text,
.pn-modal-overlay .screen-reader-text,
.pn-guest-shell .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Browser form controls do not reliably inherit typography, especially
   textareas. Keep every app/modal field on Nudjee's UI stack. */
#pn-app button,
#pn-app input,
#pn-app select,
#pn-app textarea,
.pn-modal-overlay button,
.pn-modal-overlay input,
.pn-modal-overlay select,
.pn-modal-overlay textarea,
.pn-guest-shell button,
.pn-guest-shell input,
.pn-guest-shell select,
.pn-guest-shell textarea {
    font-family: var(--pn-font) !important;
    font-style: normal;
    letter-spacing: inherit;
}

#pn-app textarea.pn-input,
.pn-modal-overlay textarea.pn-input,
#pn-app textarea,
.pn-modal-overlay textarea {
    line-height: 1.45;
}

#pn-app .pn-input::placeholder,
.pn-modal-overlay .pn-input::placeholder,
#pn-app textarea::placeholder,
.pn-modal-overlay textarea::placeholder {
    font-family: var(--pn-font) !important;
    color: #8c8f99;
    opacity: 1;
    letter-spacing: 0;
}

/* WordPress may replace emoji characters with img.emoji nodes. Theme removal
   also removes the usual emoji sizing rules, so constrain them here globally. */
#pn-app img.emoji,
#pn-app img.wp-smiley,
.pn-modal-overlay img.emoji,
.pn-modal-overlay img.wp-smiley,
.pn-guest-shell img.emoji,
.pn-guest-shell img.wp-smiley {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 1em !important;
    max-height: 1em !important;
    margin: 0 .07em !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    object-fit: contain !important;
    vertical-align: -.1em !important;
}

/* Keep modal internals self-contained if a theme/plugin injects broad form or
   image rules. This complements runtime relocation of signed-in modals into
   #pn-app and protects sheets before that relocation occurs. */
.pn-modal-overlay,
.pn-modal-overlay *,
.pn-modal-overlay *::before,
.pn-modal-overlay *::after {
    box-sizing: border-box;
}

.pn-modal-overlay:not(#pn-hub-modal) [role="dialog"] {
    max-width: calc(100vw - 20px);
}

.pn-modal-overlay fieldset {
    min-width: 0;
}

.pn-modal-overlay img:not(.emoji):not(.wp-smiley) {
    max-width: 100%;
}

/* Circles search: use the real Nudjee search SVG, never a font glyph. */
.pn-circle-search-reference .pn-circle-search-glyph {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}

.pn-circle-search-reference .pn-circle-search-glyph .pn-icon-svg {
    width: 16px;
    height: 16px;
}

/* Create Circle icon picker must work whether the sheet has already been moved
   into #pn-app or is momentarily still a document-level modal. */
#pn-circle-create-modal .pn-circle-icon-picker,
#pn-circle-icon-modal .pn-circle-icon-manager {
    min-width: 0;
}

#pn-circle-create-modal .pn-circle-icon-picker {
    padding: 13px;
    border: 1px solid var(--pn-line);
    border-radius: 18px;
    background: #fbfbfd;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    text-align: left;
}

#pn-circle-create-modal .pn-circle-icon-picker-preview,
#pn-circle-icon-modal .pn-circle-icon-manager-preview {
    overflow: hidden;
    display: grid;
    place-items: center;
}

#pn-circle-create-modal .pn-circle-icon-picker-preview {
    width: 72px;
    height: 72px;
    border: 2px solid #fff;
    border-radius: 23px;
    background: linear-gradient(145deg, #7868f2, #43c7bf);
    color: #fff;
    box-shadow: 0 9px 22px rgba(72,61,145,.16);
    font-size: 34px;
}

#pn-circle-create-modal .pn-circle-icon-picker-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

#pn-circle-create-modal .pn-circle-icon-picker-copy > strong,
#pn-circle-create-modal .pn-circle-icon-picker-copy > small {
    display: block;
    width: 100%;
}

#pn-circle-create-modal .pn-circle-icon-picker-copy > strong {
    color: var(--pn-ink);
    font-size: 11px;
}

#pn-circle-create-modal .pn-circle-icon-picker-copy > small {
    color: var(--pn-muted);
    font-size: 9px;
    line-height: 1.45;
}

#pn-circle-create-modal .pn-circle-icon-picker-actions {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

@media (max-width: 560px) {
    #pn-circle-create-modal .pn-circle-icon-picker {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }
    #pn-circle-create-modal .pn-circle-icon-picker-preview {
        width: 58px;
        height: 58px;
        border-radius: 19px;
        font-size: 28px;
    }
}

/* A disabled Business lane remains discoverable as education rather than
   disappearing. It is clickable and routes to the Business profile tab. */
.pn-live-mode-switch button.is-unavailable.is-education {
    opacity: .72;
    cursor: pointer;
    border-style: dashed;
}

.pn-live-mode-switch button.is-unavailable.is-education:hover,
.pn-live-mode-switch button.is-unavailable.is-education:focus-visible {
    opacity: 1;
    color: #0c7f77;
    background: rgba(17,156,146,.09);
    transform: translateY(-1px);
}

.pn-business-mode-education[hidden],
#pn-business-profile-fields[hidden] {
    display: none !important;
}

.pn-business-mode-education {
    margin: 12px 0 18px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(17,156,146,.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 96% 4%, rgba(35,200,179,.18), transparent 34%),
        linear-gradient(145deg, #f7fffd 0%, #ffffff 68%);
    box-shadow: 0 16px 38px rgba(20,91,84,.08);
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;
}

.pn-business-mode-education-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #0c7f77;
    background: rgba(17,156,146,.11);
}

.pn-business-mode-education-icon .pn-icon-svg {
    width: 25px;
    height: 25px;
}

.pn-business-mode-education-copy {
    min-width: 0;
}

.pn-business-mode-education-copy .pn-eyebrow {
    color: #0c7f77;
}

.pn-business-mode-education-copy h3 {
    margin: 4px 0 7px;
    color: #17211f;
    font-size: clamp(19px, 2.5vw, 27px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.pn-business-mode-education-copy p {
    margin: 0;
    max-width: 680px;
    color: #67736f;
    font-size: 11px;
    line-height: 1.55;
}

.pn-business-mode-benefits {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.pn-business-mode-benefits > span {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(17,156,146,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
}

.pn-business-mode-benefits .pn-icon-svg {
    grid-row: 1 / span 2;
    width: 20px;
    height: 20px;
    color: #119c92;
}

.pn-business-mode-benefits b {
    color: #24312e;
    font-size: 10px;
    line-height: 1.25;
}

.pn-business-mode-benefits small {
    color: #75807d;
    font-size: 8px;
    line-height: 1.4;
}

.pn-business-mode-education > .pn-btn {
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
    background: linear-gradient(145deg, #119c92, #23c8b3);
    box-shadow: 0 11px 25px rgba(17,156,146,.18);
}

.pn-business-mode-education-note {
    grid-column: 1 / -1;
    color: #808986;
    font-size: 8px;
    line-height: 1.4;
}

@media (max-width: 680px) {
    .pn-business-mode-education {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 17px;
        border-radius: 20px;
    }
    .pn-business-mode-education-icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }
    .pn-business-mode-benefits {
        grid-template-columns: 1fr;
    }
    .pn-business-mode-education > .pn-btn {
        width: 100%;
    }
}

#pn-app textarea.pn-input,
.pn-modal-overlay textarea.pn-input,
.pn-guest-shell textarea.pn-input {
    min-height: 76px;
    padding: 11px 13px !important;
    resize: vertical;
}

#pn-app .pn-profile-progress-ring b,
#pn-app .pn-profile-completion > b,
#pn-app .pn-profile-completion strong,
#pn-onboarding-modal .pn-onboarding-core-complete strong,
#pn-onboarding-modal .pn-onboarding-core-complete b {
    font-family: var(--pn-font) !important;
    font-variant-numeric: tabular-nums;
}

/* v2.19.5: make the disabled Business education lane visibly intentional. */
#pn-app .pn-live-mode-switch button.is-unavailable.is-education {
    border: 1px dashed rgba(17, 156, 146, 0.28);
}


/* ========================================================================== 
   Nudjee 2.19.6 — mobile viewport + modal consistency audit
   ========================================================================== */

/* Profile identity hero: the completion CTA is a second row, not a third
   horizontal flex item. This prevents the photo/name/completion content from
   collapsing into narrow columns on phones. */
#pn-app .pn-profile-hero-card {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
#pn-app .pn-profile-hero-card .pn-profile-photo-button { grid-column: 1; grid-row: 1; }
#pn-app .pn-profile-hero-card .pn-profile-summary { grid-column: 2; grid-row: 1; min-width: 0; }
#pn-app .pn-profile-hero-card .pn-profile-completion {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 2px;
}
#pn-app .pn-profile-summary small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 860px) {
    :root {
        --pn-mobile-nav-height: 76px;
        --pn-mobile-modal-gap: 10px;
    }

    html:has(body.pn-app-viewport),
    body.pn-app-viewport {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body.pn-app-viewport #pn-app.pn-app-shell {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        min-height: var(--pn-visual-viewport-height, 100dvh) !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
    }

    /* ------------------------------------------------------------------
       Persistent nav
       Keep active pills inside their own grid cells. The raised Nearby circle
       no longer collides with Chats/Circles active backgrounds.
       ------------------------------------------------------------------ */
    #pn-app .pn-bottom-nav-reference {
        box-sizing: border-box;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        width: 100vw !important;
        height: var(--pn-mobile-nav-height) !important;
        min-height: var(--pn-mobile-nav-height) !important;
        padding: 8px 7px max(8px, env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    #pn-app .pn-bottom-nav-reference .pn-nav-item:not(.pn-nav-item-primary) {
        width: min(64px, calc(100% - 4px));
        min-width: 0;
        min-height: 56px;
        height: 56px;
        margin-inline: auto;
        padding: 5px 2px 2px;
        justify-self: center;
        border-radius: 18px;
        transform: none !important;
    }

    #pn-app .pn-bottom-nav-reference .pn-nav-item-primary {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px;
        min-height: 68px;
        margin: -30px auto 0 !important;
        justify-self: center;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.38),
            0 13px 28px var(--pn-shell-glow),
            0 0 0 3px color-mix(in srgb, var(--pn-shell-a) 13%, transparent) !important;
    }

    #pn-app .pn-bottom-nav-reference .pn-nav-item-primary .pn-icon-svg {
        width: 29px !important;
        height: 29px !important;
    }

    /* ------------------------------------------------------------------
       Hub pages (Nudges, Circles, Chats, Profile, Membership)
       The Hub is a page surface, not a generic dialog. It occupies the entire
       visual viewport behind the persistent nav; each view reserves nav space
       internally so no underlying map pixels can leak between page and tabs.
       ------------------------------------------------------------------ */
    body.pn-app-viewport #pn-app > #pn-hub-modal {
        position: fixed !important;
        inset: auto !important;
        top: var(--pn-visual-viewport-offset, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--pn-visual-viewport-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: var(--pn-visual-viewport-height, 100dvh) !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #fbfbfd !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        z-index: 100400 !important;
    }

    body.pn-app-viewport #pn-app > #pn-hub-modal > .pn-hub-shell,
    body.pn-app-viewport #pn-app > #pn-hub-modal > .pn-hub-shell[role="dialog"] {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    body.pn-app-viewport #pn-app > #pn-hub-modal .pn-hub-view {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto;
        padding-bottom: 0;
        overscroll-behavior-y: contain;
        scrollbar-width: none;
    }
    body.pn-app-viewport #pn-app > #pn-hub-modal .pn-hub-view::-webkit-scrollbar { display: none; }

    body.pn-app-viewport #pn-view-inbox,
    body.pn-app-viewport #pn-view-chats,
    body.pn-app-viewport #pn-view-subscription {
        padding-bottom: calc(var(--pn-mobile-nav-height) + env(safe-area-inset-bottom) + 14px) !important;
    }

    body.pn-app-viewport #pn-view-circles.pn-circles-reference-view {
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding-bottom: calc(var(--pn-mobile-nav-height) + env(safe-area-inset-bottom) + 12px) !important;
        overflow-x: hidden !important;
    }
    body.pn-app-viewport #pn-view-circles .pn-circles-reference-hero,
    body.pn-app-viewport #pn-view-circles .pn-circles-reference-content {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    /* The profile page itself scrolls as one mobile page. The form should not
       create a second height model that fights the Hub viewport. */
    body.pn-app-viewport #pn-view-profile {
        width: 100% !important;
        max-width: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    body.pn-app-viewport #pn-view-profile .pn-profile-form {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100% !important;
        padding: 14px 14px calc(var(--pn-mobile-nav-height) + env(safe-area-inset-bottom) + 22px) !important;
        overflow: visible !important;
    }
    #pn-app .pn-profile-hero-card {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 12px;
        padding: 15px;
        border-radius: 22px;
    }
    #pn-app .pn-profile-photo-button { width: 70px; height: 70px; border-radius: 21px; }
    #pn-app .pn-profile-summary h3 { margin-top: 6px; font-size: 22px; }
    #pn-app .pn-profile-summary small { font-size: 10px; line-height: 1.35; }
    #pn-app .pn-profile-completion {
        grid-template-columns: 48px minmax(0,1fr) 20px;
        gap: 10px;
        padding: 10px 11px;
        margin-top: 0;
    }
    #pn-app .pn-profile-completion > b { min-height: 42px; }

    /* ------------------------------------------------------------------
       Notification centre
       It deliberately stays above the persistent nav, but its available height
       is calculated before the nav. Header controls cannot overlap the title.
       ------------------------------------------------------------------ */
    body.pn-app-viewport #pn-app > .pn-notification-center-overlay {
        position: fixed !important;
        inset: auto !important;
        top: var(--pn-visual-viewport-offset, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100vw !important;
        height: var(--pn-visual-viewport-height, 100dvh) !important;
        max-height: var(--pn-visual-viewport-height, 100dvh) !important;
        padding: 10px 10px calc(var(--pn-mobile-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
        align-items: stretch !important;
        justify-content: center !important;
        overflow: hidden !important;
        z-index: 100450 !important;
    }

    #pn-app .pn-notification-center {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 24px !important;
    }

    #pn-app .pn-notification-center-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px !important;
        padding: 14px !important;
    }
    #pn-app .pn-notification-title-wrap { min-width: 0; gap: 9px; }
    #pn-app .pn-notification-title-icon { width: 40px; height: 40px; border-radius: 14px; }
    #pn-app .pn-notification-title-wrap > div { min-width: 0; }
    #pn-app .pn-notification-title-wrap .pn-eyebrow { font-size: 8px; white-space: nowrap; }
    #pn-app .pn-notification-title-wrap h2 {
        max-width: 100%;
        margin-top: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(1.18rem, 5.7vw, 1.38rem) !important;
    }
    #pn-app .pn-notification-header-actions { gap: 6px; min-width: 0; }
    #pn-app .pn-notification-clear-all {
        min-height: 34px;
        padding-inline: 10px;
        white-space: nowrap;
        font-size: .72rem;
    }
    #pn-app .pn-notification-header-actions .pn-icon-button {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }
    #pn-app .pn-notification-filters { padding: 10px 12px; }
    #pn-app .pn-notification-list { min-height: 0; padding-bottom: 12px; }

    /* ------------------------------------------------------------------
       Blocking dialogs/sheets
       These must sit ABOVE the bottom nav. Previously the nav had the higher
       z-index, which is why Ghost/Boost/Create Circle actions could be clipped.
       ------------------------------------------------------------------ */
    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) {
        position: fixed !important;
        inset: auto !important;
        top: var(--pn-visual-viewport-offset, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--pn-visual-viewport-height, 100dvh) !important;
        max-height: var(--pn-visual-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 100700 !important;
    }

    body.pn-app-viewport #pn-app > .pn-sheet-overlay:not(#pn-notifications-modal) {
        align-items: flex-end !important;
        justify-content: center !important;
    }

    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) > [role="dialog"],
    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) > .pn-modal-content,
    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) > .pn-action-sheet,
    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) > .pn-chat-shell,
    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) > .pn-circle-chat-shell,
    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) > .pn-circle-detail-shell,
    body.pn-app-viewport #pn-app > .pn-modal-overlay:not(#pn-hub-modal):not(.pn-notification-center-overlay) > .pn-onboarding-shell {
        box-sizing: border-box;
        max-width: 100% !important;
        max-height: calc(var(--pn-visual-viewport-height, 100dvh) - 20px) !important;
        min-width: 0 !important;
    }

    body.pn-app-viewport #pn-app > .pn-sheet-overlay > .pn-action-sheet {
        width: min(100%, 520px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px)) !important;
        border-radius: 26px 26px 18px 18px !important;
    }

    /* Full-height conversation/detail surfaces should consume the visual
       viewport and not inherit the 92svh legacy sheet height. */
    body.pn-app-viewport #pn-app > #pn-chat-modal,
    body.pn-app-viewport #pn-app > #pn-circle-chat-modal,
    body.pn-app-viewport #pn-app > #pn-circle-detail-modal,
    body.pn-app-viewport #pn-app > #pn-mobile-discovery-modal {
        padding: 0 !important;
        align-items: stretch !important;
    }
    body.pn-app-viewport #pn-app > #pn-chat-modal .pn-chat-shell,
    body.pn-app-viewport #pn-app > #pn-circle-chat-modal .pn-circle-chat-shell,
    body.pn-app-viewport #pn-app > #pn-circle-detail-modal .pn-circle-detail-shell,
    body.pn-app-viewport #pn-app > #pn-mobile-discovery-modal .pn-mobile-discovery-shell {
        width: 100vw !important;
        height: var(--pn-visual-viewport-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: var(--pn-visual-viewport-height, 100dvh) !important;
        border-radius: 0 !important;
    }

    /* Generic modal headers stay within one row without title/action collisions. */
    #pn-app .pn-modal-header {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        gap: 10px;
        padding: 14px 15px;
    }
    #pn-app .pn-modal-header > div { min-width: 0; }
    #pn-app .pn-modal-header h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: clamp(22px, 7vw, 27px);
    }
    #pn-app .pn-modal-header .pn-icon-button { flex: 0 0 auto; }
}

@media (max-width: 410px) {
    #pn-app .pn-notification-center-header { padding: 12px !important; }
    #pn-app .pn-notification-title-icon { width: 36px; height: 36px; border-radius: 12px; }
    #pn-app .pn-notification-title-icon .pn-icon-svg { width: 19px; height: 19px; }
    #pn-app .pn-notification-title-wrap { gap: 7px; }
    #pn-app .pn-notification-title-wrap .pn-eyebrow { font-size: 7px; }
    #pn-app .pn-notification-clear-all { min-height: 32px; padding-inline: 8px; font-size: .68rem; }
    #pn-app .pn-notification-header-actions .pn-icon-button { width: 36px; height: 36px; flex-basis: 36px; }

    #pn-app .pn-bottom-nav-reference .pn-nav-item:not(.pn-nav-item-primary) {
        width: min(60px, calc(100% - 2px));
        font-size: .64rem;
    }
    #pn-app .pn-bottom-nav-reference .pn-nav-item-primary {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px;
        min-height: 66px;
    }
}

/* === Nudjee 2.19.8 — Control Tower member provisioning + touch-nav reset === */
.pn-admin-user-toolbar-with-create { flex-wrap: wrap; }
.pn-admin-user-toolbar-with-create > label { min-width: min(360px, 100%); }
.pn-admin-create-user-sheet {
    width: min(720px, calc(100vw - 28px));
    max-height: min(860px, calc(100dvh - 28px));
    overflow: auto;
}
.pn-admin-create-user-form { display: grid; gap: 14px; }
.pn-admin-create-user-name-grid,
.pn-admin-benefits-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pn-admin-create-user-access { margin:0; padding:0; border:0; display:grid; gap:9px; }
.pn-admin-create-user-access legend { margin:0 0 3px; color:#3c4151; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.pn-admin-create-user-access .pn-moderation-choice { width:100%; }
.pn-admin-create-user-password[hidden] { display:none !important; }
.pn-admin-benefits-box { border:1px solid #e4e7ee; border-radius:18px; background:#f8f9fc; padding:14px; }
.pn-admin-benefits-box > header { margin-bottom:12px; }
.pn-admin-benefits-box > header span,
.pn-admin-benefits-box > header strong { display:block; }
.pn-admin-benefits-box > header span { color:#858a99; font-size:9px; font-weight:900; letter-spacing:.08em; }
.pn-admin-benefits-box > header strong { margin-top:3px; color:#282d3d; font-size:14px; }
.pn-admin-create-user-submit { width:100%; }

@media (max-width: 680px) {
    .pn-admin-user-toolbar-with-create .pn-btn { width:100%; }
    .pn-admin-create-user-sheet { width:100%; max-width:none; max-height:100dvh; border-radius:26px 26px 0 0; }
    .pn-admin-create-user-name-grid,
    .pn-admin-benefits-grid { grid-template-columns:1fr; }
}

/* Touch browsers can retain :hover after tapping a nav item. Only explicit
   .is-active state is allowed to paint the pill on coarse pointers. */
@media (hover: none), (pointer: coarse) {
    #pn-app .pn-bottom-nav-reference .pn-nav-item:not(.is-active):not(.pn-nav-item-primary):hover,
    #pn-app .pn-bottom-nav-reference .pn-nav-item:not(.is-active):not(.pn-nav-item-primary):focus {
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
}


/* === Nudjee 2.19.9 — verification-stack / map-gap repair ===
   Progressive profile education is intentionally hidden until its retention
   cadence says to show it. Because the component has an authored display:grid,
   relying on the browser's UA [hidden] rule is not safe: author CSS can win and
   leave an invisible element occupying vertical space. Keep hidden pre-map
   education controls completely out of layout. */
#pn-app > .pn-profile-progress-nudge[hidden],
#pn-app > .pn-first-session-objective[hidden] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    border: 0 !important;
}

@media (max-width: 860px) {
    /* The header / email-verification / identity stack stays in normal flow;
       Discover starts immediately after the last visible control. */
    body.pn-mobile-app-fixed #pn-app > .pn-verification-banner,
    body.pn-mobile-app-fixed #pn-app > .pn-live-mode-bar,
    body.pn-mobile-app-fixed #pn-app > .pn-first-session-objective:not([hidden]),
    body.pn-mobile-app-fixed #pn-app > .pn-profile-progress-nudge:not([hidden]) {
        flex: 0 0 auto;
    }

    body.pn-mobile-app-fixed #pn-app > .pn-discover-view {
        flex: 1 1 0 !important;
        margin-top: 0 !important;
        min-height: 0 !important;
    }
}

/* === 2.20.1 launch splash === */
body.pn-launch-splash-active {
    overflow: hidden;
    touch-action: none;
}
.pn-launch-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: var(--pn-launch-splash-bg, #f3f1ff);
    opacity: 1;
    transition: opacity .35s ease, visibility .35s ease;
}
.pn-launch-splash[hidden] {
    display: none !important;
}
.pn-launch-splash.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.pn-launch-splash-art {
    width: min(100%, 560px);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pn-launch-splash picture,
.pn-launch-splash img {
    display: block;
    width: 100%;
    height: auto;
}
.pn-launch-splash img {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px);
    object-fit: contain;
    border-radius: 28px;
    box-shadow: 0 24px 64px rgba(32, 31, 79, .16);
}
@media (min-width: 1025px) {
    .pn-launch-splash { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .pn-launch-splash { transition: none !important; }
}