/* =====================================================================
   Theme: "Love neon" — pink → purple gradients, soft romantic background.
   Loaded after app.css and overrides its look.
   ===================================================================== */
body.nc-body { background: var(--bg); overflow-x: hidden; }
#nc-app { position: relative; z-index: 1; }

/* Background decorations */
.nc-deco { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nc-blob { position: absolute; border-radius: 50%; }
.nc-blob.b1 { width: 360px; height: 360px; left: -170px; top: 22%; background: radial-gradient(circle at 60% 40%, #ffd8ea, rgba(255, 216, 234, 0) 70%); }
.nc-blob.b2 { width: 520px; height: 520px; right: -230px; top: 30%; background: radial-gradient(circle at 40% 40%, #ffd3e8, rgba(255, 211, 232, 0) 68%); }
.nc-blob.b3 { width: 620px; height: 620px; right: -160px; bottom: -330px; background: radial-gradient(circle at 40% 40%, #ffc6e0, rgba(255, 198, 224, 0) 70%); }
.nc-curve { position: absolute; fill: none; stroke: #f39ac8; stroke-width: 1.4; opacity: .75; }
.nc-curve.c1 { width: 220px; height: 300px; left: -40px; top: 28%; }
.nc-curve.c2 { width: 380px; height: 280px; right: -20px; bottom: 6%; }
.nc-deco .nc-heart { position: absolute; width: 30px; height: 30px; fill: none; stroke: #f06bb0; stroke-width: 1.4; }
.nc-heart.h1 { left: 90px; top: 25%; transform: rotate(-12deg); }
.nc-heart.h2 { right: 190px; bottom: 21%; width: 46px; height: 46px; fill: #ffc4dd; stroke: #ffb0d3; transform: rotate(10deg); }
.nc-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #c49ae8; opacity: .8; }
.nc-dot.d1 { left: 88px; top: 68%; width: 6px; height: 6px; background: #c03ad0; }
.nc-dot.d2 { right: 110px; top: 13%; width: 14px; height: 14px; background: #e0b3f0; }
.nc-dot.d3 { right: 135px; top: 16%; width: 5px; height: 5px; }
.nc-dot.d4 { right: 110px; top: 58%; width: 12px; height: 12px; background: #f0b3dc; }
.nc-dot.d5 { right: 240px; bottom: 14%; width: 7px; height: 7px; background: #9b6be0; }
@media (max-width: 1280px) { .nc-heart, .nc-curve, .nc-dot { display: none; } }

/* Header */
.nc-header { background: rgba(253, 246, 250, .85); border-bottom: 0; }
.nc-state, .nc-search { height: 46px; border-color: #f3e6ef; box-shadow: 0 4px 16px rgba(160, 60, 140, .07); }
.nc-state { flex: 0 1 400px; max-width: 46%; }
.nc-state > svg:first-child { color: #ff3e8e; }
.nc-state select { font-weight: 600; font-size: 15px; }
.nc-header-right { display: flex; align-items: center; gap: 10px; flex: 0 1 420px; min-width: 0; justify-content: flex-end; }
.nc-header-right .nc-search { flex: 1 1 auto; max-width: 360px; }
.nc-filter-btn {
	position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; border: 1px solid #f3e6ef; background: #fff;
	display: grid; place-items: center; cursor: pointer; color: #3a2f5c; box-shadow: 0 4px 16px rgba(160, 60, 140, .07);
}
.nc-filter-btn:hover { border-color: #f6b8d8; }
.nc-filter-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #ff3e8e; border: 2px solid #fff; }
.nc-state:focus-within, .nc-search:focus-within { border-color: #ff7ab8; box-shadow: 0 0 0 4px #fde3f0; }

/* Hero */
.nc-main { padding-top: 14px; }
.nc-hero { margin: 6px 0 18px; align-items: center; }
.nc-hero h1 { font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; display: flex; align-items: flex-start; }
.nc-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.nc-doodle { width: 50px; height: 50px; margin: -8px 0 0 6px; fill: none; stroke: #ff4fa3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nc-doodle circle { fill: #ff4fa3; stroke: none; }
.nc-hero p { font-size: 17px; margin-top: 6px; }
.nc-pill { padding: 10px 18px; font-size: 15px; background: #fff; border: 0; box-shadow: 0 6px 20px rgba(160, 60, 140, .1); color: var(--text); }
.nc-live { width: 10px; height: 10px; }

/* Map: deep navy with magenta roads */
.nc-mapwrap {
	height: 56vh; height: min(56vh, 400px); min-height: 300px; border-radius: 24px; border: 0; background: #0b0628;
	box-shadow: 0 22px 50px rgba(70, 20, 110, .28);
}
.nc-map, .nc-mapwrap .leaflet-container { background: #0b0628; }
.nc-tiles { filter: grayscale(1) invert(1) sepia(1) hue-rotate(222deg) saturate(4.2) brightness(.72) contrast(1.4); }
.nc-mapwrap .leaflet-ncNeon-pane { filter: drop-shadow(0 0 3px #ff4fd8) drop-shadow(0 0 10px rgba(255, 79, 216, .65)); }
.nc-map-hud {
	pointer-events: auto; cursor: pointer; flex-direction: row; align-items: center; gap: 10px; text-align: left;
	padding: 12px 16px 12px 14px; border-radius: 26px; max-width: 70%;
	background: rgba(14, 8, 40, .82); border: 1px solid rgba(255, 255, 255, .28); font: inherit; color: #fff;
}
.nc-map-hud > svg { width: 22px; height: 22px; color: #fff; }
.nc-map-hud > svg:last-child { width: 18px; height: 18px; }
.nc-hud-text { display: flex; flex-direction: column; min-width: 0; }
.nc-map-hud b { font-size: 18px; text-shadow: none; }
.nc-hud-text > span { font-size: 12px; color: #e6defa; margin-top: 1px; }
.nc-map-btn { height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(14, 8, 40, .7); color: #fff; box-shadow: none; font-size: 14px; }
.nc-map-btn svg { color: #fff; }
.nc-map-btn:hover { border-color: #ff7ad0; box-shadow: 0 0 16px rgba(255, 79, 216, .45); }
.nc-mapwrap .leaflet-control-zoom { border: 1px solid rgba(255, 255, 255, .5) !important; border-radius: 14px !important; overflow: hidden; box-shadow: none !important; margin: 0 14px 24px 0 !important; }
.nc-mapwrap .leaflet-control-zoom a { width: 42px !important; height: 38px !important; line-height: 38px !important; background: rgba(14, 8, 40, .8) !important; color: #fff !important; border-color: rgba(255, 255, 255, .25) !important; font-size: 22px !important; }
.nc-mapwrap .leaflet-control-attribution { background: rgba(11, 6, 40, .6) !important; }
.nc-mapwrap .leaflet-control-attribution a { color: #f5b8e6 !important; }
.leaflet-tooltip.nc-tip { background: rgba(14, 8, 40, .94); border-color: rgba(255, 79, 216, .6); box-shadow: 0 0 14px rgba(255, 79, 216, .35); }
.nc-pin-av { background: linear-gradient(135deg, #ff4fa3, #7b3df5); box-shadow: 0 0 10px rgba(255, 79, 216, .8), 0 0 22px rgba(123, 61, 245, .6); }
.nc-cluster span { background: radial-gradient(circle, rgba(210, 68, 230, .9), rgba(123, 61, 245, .45)); border-color: #ff7ad0; box-shadow: 0 0 12px #ff4fd8, inset 0 0 12px rgba(255, 79, 216, .5); text-shadow: 0 0 6px #ff4fd8; }

/* Join banner */
.nc-cta {
	position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; flex-wrap: nowrap;
	padding: 16px 22px; border-radius: 18px; background: linear-gradient(90deg, #ff6fae 0%, #d24ee8 42%, #7f45f2 78%, #5b3df0 100%);
	box-shadow: 0 16px 40px rgba(180, 60, 200, .28);
}
.nc-cta::after { content: ""; position: absolute; right: 18%; top: -30px; width: 220px; height: 160px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); pointer-events: none; }
.nc-cta-avs { display: flex; flex: none; }
.nc-cta-avs i { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.nc-cta-avs i + i { margin-left: -16px; }
.nc-cta-avs i:nth-child(1) { background: linear-gradient(135deg, #ffd0a8, #ff6fae); }
.nc-cta-avs i:nth-child(2) { background: linear-gradient(135deg, #9a6bff, #4e3df0); }
.nc-cta-avs i:nth-child(3) { background: linear-gradient(135deg, #ff5fa8, #e0409a); }
.nc-cta-avs i svg { width: 24px; height: 24px; fill: #fff; stroke: #fff; }
.nc-cta-text { flex: 1; min-width: 0; }
.nc-cta-text b { font-size: 20px; font-weight: 800; }
.nc-cta-text span { font-size: 15px; opacity: .95; }
.nc-cta-hearts { display: flex; align-items: flex-end; gap: 6px; flex: none; }
.nc-cta-hearts svg { width: 46px; height: 46px; fill: #ff5fa8; stroke: #ff8cc4; filter: drop-shadow(0 6px 10px rgba(120, 0, 80, .3)); transform: rotate(-12deg); }
.nc-cta-hearts svg + svg { width: 28px; height: 28px; transform: rotate(14deg); }
.nc-cta .nc-btn { flex: none; height: 46px; padding: 0 24px; border-radius: 999px; background: #fff; color: #e8338f; font-weight: 700; font-size: 16px; }
.nc-cta .nc-btn svg { width: 18px; height: 18px; }

/* Chips */
.nc-chips { gap: 10px; margin-bottom: 20px; padding: 2px; }
.nc-chip {
	display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; font-size: 14px;
	background: #fff; border: 1px solid #f2e5ee; color: #2f2550; box-shadow: 0 4px 14px rgba(160, 60, 140, .06);
}
.nc-chip svg { width: 18px; height: 18px; }
.nc-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--online); }
.nc-chip[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(220, 60, 170, .3); }

/* Member cards */
.nc-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.nc-card {
	display: block; text-align: left; padding: 18px 16px 16px; border: 1px solid #f4e8f0; border-radius: 18px;
	box-shadow: 0 10px 30px rgba(120, 40, 140, .08);
}
.nc-card:hover { border-color: #f6c2dd; transform: translateY(-2px); }
.nc-card-top { display: flex; gap: 16px; align-items: flex-start; padding-right: 22px; }
.nc-card .nc-av-lg { width: 90px; height: 90px; font-size: 34px; }
.nc-card .nc-av img, .nc-card .nc-av .nc-ini { box-shadow: 0 6px 18px rgba(200, 60, 160, .3); }
.nc-card .nc-av .nc-dot { width: 22px; height: 22px; min-width: 0; min-height: 0; right: 0; bottom: 4px; border-width: 3px; border-color: #fff; }
.nc-card-info { min-width: 0; flex: 1; padding-top: 6px; }
.nc-card h3 { margin: 0; font-size: 21px; font-weight: 800; color: var(--text); }
.nc-card .nc-meta { margin-top: 2px; font-size: 14px; white-space: normal; }
.nc-card .nc-status { font-size: 14px; margin-top: 2px; }
.nc-card .nc-status.on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--online); margin-right: 6px; vertical-align: 1px; }
.nc-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.nc-itag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 10px; background: #f4eef8; color: #5f5482; font-size: 13px; font-weight: 500; }
.nc-itag svg { width: 15px; height: 15px; }
.nc-card .nc-btn { margin-top: 14px; height: 42px; border-radius: 999px; font-size: 15px; }
.nc-fav { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: #ff3e8e; padding: 0; }
.nc-fav svg { width: 20px; height: 20px; }
.nc-fav.on svg { fill: #ff3e8e; }

/* Buttons: gradient by default */
.nc-btn { background: var(--grad); }
.nc-btn.grad { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(220, 60, 170, .25); }
.nc-btn.soft { background: var(--accent-soft); color: var(--accent); }
.nc-btn.ghost { background: var(--surface-2); color: var(--text); }
.nc-btn.danger { background: transparent; }

/* Bottom nav */
.nc-nav { background: #fff; border: 1px solid #f3e6ef; border-radius: 26px; box-shadow: 0 14px 40px rgba(120, 40, 140, .16); }
.nc-nav a { color: #3a2f5c; border-radius: 20px; }
.nc-nav a.active { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(220, 60, 170, .3); }

/* Misc accents */
.nc-tabs button[aria-selected="true"] { color: var(--accent); }
.nc-count { background: var(--grad); }
.nc-conv.active { background: #fdeaf4; }
.nc-switch input:checked + span { background: var(--grad); }
.nc-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; background: var(--surface-2); border-radius: 14px; }
.nc-seg-opt { position: relative; }
.nc-seg-opt input { position: absolute; opacity: 0; }
.nc-seg-opt span { display: grid; place-items: center; height: 38px; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.nc-seg-opt input:checked + span { background: var(--grad); color: #fff; }
.nc-seg-opt input:focus-visible + span { outline: 3px solid #fde3f0; }

/* Responsive */
@media (max-width: 860px) {
	.nc-cta { flex-wrap: wrap; gap: 14px; }
	.nc-cta-hearts { display: none; }
}
@media (max-width: 560px) {
	.nc-header { gap: 8px; }
	.nc-state { flex: 1 1 0; max-width: none; }
	.nc-header-right { flex: 1.25 1 0; gap: 6px; }
	.nc-header-right .nc-search { max-width: none; }
	.nc-filter-btn { width: 44px; height: 44px; }
	.nc-hero p { font-size: 15px; }
	.nc-doodle { width: 36px; height: 36px; }
	.nc-grid { grid-template-columns: 1fr; gap: 12px; }
	.nc-card { padding: 14px; }
	.nc-card .nc-av-lg { width: 72px; height: 72px; font-size: 28px; }
	.nc-card h3 { font-size: 18px; }
	.nc-cta { padding: 16px; }
	.nc-cta-avs i { width: 44px; height: 44px; }
	.nc-cta-text b { font-size: 18px; }
	.nc-cta .nc-btn { width: 100%; }
	.nc-map-hud { max-width: calc(100% - 120px); padding: 10px 12px; }
	.nc-map-hud b { font-size: 16px; }
	.nc-seg { grid-template-columns: repeat(2, 1fr); }
}