/* MagnusPrime Carrier */

.mp-wrap *{ box-sizing: border-box; }

.mp-wrap{
	background:
		radial-gradient(1200px 600px at 62% 0%, rgba(120,200,255,.10), transparent 55%),
		radial-gradient(900px 500px  at 24% 70%, rgba(190,160,255,.08), transparent 60%),
		#05070b;
	color: rgba(245,248,255,.92);
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html, body{ background: #05070b !important; }

.mp-label{
	font-size: .68rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(245,248,255,.45);
}
.mp-divider{
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(140,220,255,.18), transparent);
	margin: .75rem 0;
}
.mp-panel{
	background: rgba(10,12,18,.6);
	border: 1px solid rgba(120,200,255,.14);
	border-radius: 1.25rem;
}
.mp-chip{
	border: 1px solid rgba(120,200,255,.2);
	border-radius: 999px;
	padding: .3rem .75rem;
	font-size: .75rem;
	color: rgba(245,248,255,.7);
	white-space: nowrap;
}
.mp-chip--carrier{
	background: rgba(140,220,255,.1);
	border-color: rgba(140,220,255,.32);
	color: rgba(140,220,255,.92);
	font-weight: 600;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.mp-c-hero{
	position: relative;
	width: 100%;
	min-height: 420px;
	overflow: hidden;
	display: flex;
	align-items: stretch;
}
.mp-c-hero-bg{
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 15%;
	filter: brightness(.55) saturate(1.3) blur(10px);
	transform: scale(1.12);
	z-index: 0;
}
.mp-c-hero-bg-fallback{
	position: absolute; inset: 0;
	background: linear-gradient(135deg, #14202c 0%, #1a0e2c 50%, #05070b 100%);
	z-index: 0;
}
.mp-c-hero-grad{
	position: absolute; inset: 0;
	background:
		linear-gradient(to right,  rgba(5,7,11,.1) 0%, rgba(5,7,11,.6) 55%, rgba(5,7,11,.92) 100%),
		linear-gradient(to bottom, rgba(5,7,11,.05) 0%, rgba(5,7,11,.6) 100%);
	z-index: 1;
}
.mp-c-hero-content{
	position: relative; z-index: 2;
	width: 100%; max-width: 1100px; margin: 0 auto;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}
.mp-c-avatar-col{ display: flex; align-items: stretch; margin-left: -2rem; }
.mp-c-avatar-card{
	width: 100%; height: 100%; min-height: 420px;
	border-radius: 0 1rem 1rem 0;
	overflow: hidden;
	border-right: 1px solid rgba(140,220,255,.18);
	box-shadow: 4px 0 40px rgba(0,0,0,.5);
	background: rgba(10,12,18,.6);
}
.mp-c-avatar-card img{ width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.mp-c-eyebrow{
	font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
	color: rgba(140,220,255,.75); margin-bottom: .2rem;
}
.mp-c-title{
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 800; line-height: 1; letter-spacing: -.035em;
	margin-bottom: .5rem;
}
.mp-c-tagline{
	font-size: .98rem;
	color: rgba(245,248,255,.65);
	margin-bottom: .7rem;
	max-width: 56ch;
}
.mp-c-stats{ display: flex; flex-wrap: wrap; gap: 7px; }

/* ── Mobile: stack avatar above meta, full-bleed, centered ─────────────────── */
@media (max-width: 760px) {
	.mp-c-hero{ min-height: 0; }
	.mp-c-hero-content{
		grid-template-columns: 1fr;
		padding: 0;
		max-width: 100%;
	}
	.mp-c-avatar-col{
		margin-left: 0;
		width: 100%;
	}
	.mp-c-avatar-card{
		min-height: 0;
		height: 56vw;
		max-height: 320px;
		width: 100%;
		border-radius: 0;
		border-right: none;
		border-bottom: 1px solid rgba(140,220,255,.18);
	}
	.mp-c-avatar-card img{ object-position: center top; }
	.mp-c-hero-meta{
		padding: 1.5rem 1.25rem 1.75rem;
	}
	.mp-c-title{ font-size: clamp(1.8rem, 8vw, 2.4rem); }
	.mp-c-stats{ justify-content: flex-start; }
}

/* ── Main container ──────────────────────────────────────────────────────── */
.mp-c-main{ max-width: 980px; margin: 0 auto; padding: 0 1.5rem 110px; }

.mp-c-section{ margin-top: 2.75rem; }
.mp-c-section-head{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .9rem; }
.mp-c-section-title{ font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.mp-c-section-sub{ font-size: .78rem; color: rgba(245,248,255,.4); }

/* ── Bio ──────────────────────────────────────────────────────────────────── */
.mp-c-bio{ padding: 1.5rem 1.6rem; font-size: .95rem; line-height: 1.7; color: rgba(245,248,255,.82); }
.mp-c-bio p{ margin: 0 0 1rem; }
.mp-c-bio p:last-child{ margin-bottom: 0; }

/* ── Range Cloud ──────────────────────────────────────────────────────────── */
.mp-cloud{
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: .6rem; padding: 2.25rem 1.5rem;
}
.mp-cloud-bubble{
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	cursor: pointer;
	border: 1px solid rgba(120,200,255,.22);
	background: rgba(140,220,255,.06);
	color: rgba(245,248,255,.85);
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
	user-select: none;
}
.mp-cloud-bubble:hover{ transform: translateY(-2px); border-color: rgba(140,220,255,.5); }
.mp-cloud-bubble.is-active{
	background: linear-gradient(160deg, rgba(140,220,255,.28), rgba(190,160,255,.18));
	border-color: rgba(140,220,255,.85);
	box-shadow: 0 0 0 1px rgba(140,220,255,.3), 0 8px 24px rgba(120,200,255,.18);
	color: #fff;
}
.mp-cloud-bubble .mp-cloud-name{ font-size: inherit; line-height: 1.15; }
.mp-cloud-bubble .mp-cloud-count{
	position: absolute; top: -6px; right: -4px;
	background: rgba(5,7,11,.9);
	border: 1px solid rgba(140,220,255,.4);
	border-radius: 999px;
	font-size: .6rem; font-weight: 700;
	color: rgba(140,220,255,.95);
	padding: 1px 5px;
}
.mp-cloud-reset{
	display: block; margin: .5rem auto 0; text-align: center;
	font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(140,220,255,.6); cursor: pointer; opacity: 0; height: 0; overflow: hidden;
	transition: opacity .2s;
}
.mp-cloud-reset.is-visible{ opacity: 1; height: auto; margin-bottom: .25rem; }

/* ── Node presence ────────────────────────────────────────────────────────── */
.mp-c-nodes{ display: flex; flex-wrap: wrap; gap: .6rem; }
.mp-node-badge{
	display: flex; align-items: center; gap: .5rem;
	padding: .6rem .9rem;
	border-radius: .9rem;
	text-decoration: none;
	color: rgba(245,248,255,.85);
}
.mp-node-badge .mp-node-name{ font-size: .85rem; font-weight: 600; }
.mp-node-badge .mp-node-count{ font-size: .7rem; color: rgba(140,220,255,.7); }

/* ── Find Music ───────────────────────────────────────────────────────────── */
.mp-find-bar{ display: flex; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.mp-find-search{
	flex: 1; min-width: 180px;
	background: rgba(10,12,18,.6);
	border: 1px solid rgba(120,200,255,.18);
	border-radius: .9rem;
	padding: .65rem .95rem;
	color: rgba(245,248,255,.9);
	font-size: .85rem;
}
.mp-find-search::placeholder{ color: rgba(245,248,255,.35); }
.mp-find-search:focus{ outline: none; border-color: rgba(140,220,255,.55); }

.mp-find-count{
	font-size: .76rem; color: rgba(245,248,255,.4);
	margin-bottom: .85rem;
}

.mp-find-group{ margin-bottom: 2.25rem; }
.mp-find-group:last-child{ margin-bottom: 0; }
.mp-find-group-header{
	display: flex; align-items: baseline; justify-content: space-between;
	gap: .75rem; margin-bottom: .75rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid rgba(120,200,255,.12);
}
.mp-find-group-title{
	font-size: .92rem; font-weight: 700;
	color: rgba(245,248,255,.92);
	text-decoration: none;
}
a.mp-find-group-title:hover{ color: rgba(140,220,255,.9); }
.mp-find-group-title--static{ color: rgba(245,248,255,.62); }
.mp-find-group-count{
	font-size: .72rem; letter-spacing: .04em;
	color: rgba(140,220,255,.7); white-space: nowrap;
}

.mp-signal-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: .9rem;
}
.mp-signal-card{
	display: flex; flex-direction: column;
	border-radius: 1rem;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .16s ease, border-color .16s ease;
}
.mp-signal-card:hover{ transform: translateY(-3px); border-color: rgba(140,220,255,.4); }
.mp-signal-card.is-hidden{ display: none; }

.mp-signal-art{
	width: 100%; aspect-ratio: 1 / 1;
	background: rgba(120,200,255,.06);
	overflow: hidden;
}
.mp-signal-art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-signal-art-empty{
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}

.mp-signal-body{ padding: .75rem .85rem .9rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.mp-signal-title{ font-size: .88rem; font-weight: 700; line-height: 1.25; }
.mp-signal-node{ font-size: .7rem; color: rgba(140,220,255,.7); letter-spacing: .03em; text-transform: uppercase; }
.mp-signal-chips{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: .25rem; }
.mp-signal-chip{
	font-size: .65rem; padding: .18rem .5rem;
	border-radius: 999px;
	border: 1px solid rgba(120,200,255,.16);
	color: rgba(245,248,255,.55);
}

.mp-find-empty{
	text-align: center; padding: 3rem 1rem;
	color: rgba(245,248,255,.4); font-size: .88rem;
	display: none;
}
.mp-find-empty.is-visible{ display: block; }