/*
 * Member space — shared styles (retro / GTA / synthwave), extracted from the
 * Claude Design mockup (docs/design-models/members-pages.html).
 * Loaded AFTER style.css; relies on its design tokens (--nfs-*).
 *
 * Covers the reduced hero (synthwave sun + grid floor + logo + language
 * switcher) shared by the authentication screens, plus the login card.
 */

.ms {
	font-family: var(--nfs-font-body);
	background: var(--nfs-bg);
	color: var(--nfs-text);
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
}

/* ===== Reduced hero ===== */

/* ===== Reduced hero — "Étiré asymétrique" (logo à gauche, soleil filant à droite) ===== */

.ms-hero {
	position: relative;
	height: clamp(120px, 18vh, 165px);
	overflow: hidden;
	display: flex;
	align-items: center;
}

.ms-hero-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 130% at 88% 60%, #2a1657 0%, #130a2c 48%, #07050f 100%);
}

/* Large sun anchored bottom-right, running off the right edge. */
.ms-hero-sun {
	position: absolute;
	bottom: -30%;
	right: -6%;
	width: min(520px, 80vw);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	opacity: .85;
	filter: drop-shadow(0 0 60px rgba(255, 59, 160, .45));
}

.ms-hero-sun .ms-sun-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(#46e3f2 0%, #7a5bff 42%, #ff3ba0 78%, #ff5a9e 100%);
}

/* Retro scanlines across the top half of the sun. */
.ms-hero-sun .ms-sun-stripes {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 50%;
	background: repeating-linear-gradient(#07050f 0, #07050f 3px, transparent 3px, transparent 12px);
}

.ms-hero-floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	overflow: hidden;
	perspective: 220px;
	mask-image: linear-gradient(transparent, #000 50%);
	-webkit-mask-image: linear-gradient(transparent, #000 50%);
}

.ms-hero-floor .ms-floor-grid {
	position: absolute;
	inset: -70% -50% -2px;
	transform: rotateX(79deg);
	transform-origin: center bottom;
	background-image:
		linear-gradient(rgba(52, 219, 239, .42) 1.3px, transparent 1.3px),
		linear-gradient(90deg, rgba(255, 59, 160, .32) 1.3px, transparent 1.3px);
	background-size: 100% 42px, 42px 100%;
	animation: msGridMove 2.4s linear infinite;
}

/* Left-aligned logo + space label. */
.ms-hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: clamp(20px, 5vw, 44px);
}

.ms-hero-logo-link {
	display: inline-flex;
	line-height: 0;
	border-radius: 8px;
}

.ms-hero-logo-link:focus-visible {
	outline: 2px solid var(--nfs-cyan);
	outline-offset: 4px;
}

.ms-hero-logo {
	height: clamp(50px, 9vh, 74px);
	width: auto;
	animation: msGlowPulse 4.5s ease-in-out infinite;
}

.ms-hero-space {
	font-family: var(--nfs-font-mono);
	font-size: 10.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--nfs-magenta);
	white-space: nowrap;
}

/* Drop the space label on very small screens to avoid the sun arc. */
@media (max-width: 520px) {
	.ms-hero-space { display: none; }
}

/* ===== Language switcher ===== */

.ms-lang {
	display: flex;
	gap: 5px;
	background: rgba(7, 5, 15, .55);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 999px;
	padding: 4px;
}

/* In the hero, the switcher floats top-right. */
.ms-hero .ms-lang {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
}

.ms-lang a {
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 5px 10px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--nfs-text-dim);
	transition: .2s;
}

.ms-lang a.is-active {
	background: var(--nfs-grad-cyan-violet);
	color: var(--nfs-bg);
}

/* ===== Main ===== */

.ms-main {
	max-width: 1060px;
	margin: 0 auto;
	padding: clamp(30px, 5vw, 56px) 22px 44px;
}

/* ===== Split auth layout (login / join / signup) ===== */

.auth-split {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 880px) {
	.auth-split {
		grid-template-columns: 1.05fr 1fr;
	}
}

/* ----- Left visual panel (synthwave sun + logo + grid); hidden < 880px ----- */
.auth-visual {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(90% 85% at 50% 42%, #1d1140 0%, #0c0820 55%, #07050f 100%);
	/* Mobile: shown as a hero band above the form. */
	padding: 54px 20px 34px;
	min-height: clamp(300px, 46vh, 430px);
}

@media (min-width: 880px) {
	.auth-visual {
		padding: 0;
		min-height: 0;
	}
}

.auth-pill {
	position: absolute;
	top: clamp(28px, 4vw, 52px);
	left: clamp(28px, 4vw, 52px);
	z-index: 2;
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--nfs-cyan);
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid rgba(52, 219, 239, .35);
	border-radius: 999px;
	background: rgba(52, 219, 239, .06);
	transition: .2s;
}

.auth-pill:hover {
	background: rgba(52, 219, 239, .14);
}

/* Keep the shared synthwave sun+logo above the grid floor in the auth panel
   (the float itself lives with the component in style.css). */
.auth-visual .nfs-sun {
	position: relative;
	z-index: 1;
}

.auth-floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	overflow: hidden;
	perspective: 220px;
	mask-image: linear-gradient(transparent, #000 55%);
	-webkit-mask-image: linear-gradient(transparent, #000 55%);
}

.auth-floor-grid {
	position: absolute;
	inset: -70% -50% -2px;
	transform: rotateX(78deg);
	transform-origin: center bottom;
	background-image:
		linear-gradient(rgba(52, 219, 239, .4) 1.3px, transparent 1.3px),
		linear-gradient(90deg, rgba(255, 59, 160, .3) 1.3px, transparent 1.3px);
	background-size: 100% 42px, 42px 100%;
	animation: msGridMove 2.4s linear infinite;
}

/* ----- Right form panel ----- */
.auth-form-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #0a0714;
}

@media (min-width: 880px) {
	.auth-form-panel {
		min-height: 100vh;
		border-left: 1px solid rgba(255, 255, 255, .06);
	}
}

.auth-lang {
	display: flex;
	justify-content: flex-end;
	padding: 18px 20px 0;
}

.auth-form-area {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 4vw, 48px);
}

.auth-form-wrap {
	width: 100%;
	max-width: 470px;
	animation: msRevealUp .5s ease both;
}

.auth-title {
	font-family: var(--nfs-font-display);
	font-weight: 400;
	font-size: clamp(38px, 5vw, 54px);
	line-height: 1;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.auth-sub {
	font-family: var(--nfs-font-body);
	font-size: 18px;
	color: var(--nfs-text-dim);
	margin: 0 0 30px;
}

/* ===== Auth card (login) ===== */

.ms-auth {
	max-width: 410px;
	margin: 0 auto;
	animation: msRevealUp .5s ease both;
}

.ms-auth-head {
	text-align: center;
	margin-bottom: 26px;
}

.ms-kicker {
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	letter-spacing: .28em;
	color: var(--nfs-cyan);
	text-transform: uppercase;
	margin: 0 0 10px;
}

.ms-title {
	font-family: var(--nfs-font-display);
	font-weight: 400;
	font-size: clamp(34px, 7vw, 48px);
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.ms-card {
	background: rgba(255, 255, 255, .024);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 18px;
	padding: 26px 24px;
}

.ms-label {
	display: block;
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nfs-text-dim);
	margin-bottom: 7px;
}

.ms-input {
	width: 100%;
	background: rgba(7, 5, 15, .6);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 11px;
	padding: 13px 15px;
	color: var(--nfs-text);
	font-family: var(--nfs-font-body);
	font-size: 16px;
	font-weight: 500;
	transition: border-color .2s;
}

.ms-input:focus {
	outline: none;
	border-color: var(--nfs-cyan);
}

.ms-field {
	margin-bottom: 16px;
}

/* Password field with reveal toggle */
.ms-pw {
	position: relative;
	margin-bottom: 22px;
}

.ms-pw .ms-input {
	padding-right: 44px;
}

.ms-pw-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--nfs-text-dim);
	cursor: pointer;
	padding: 8px;
	display: flex;
}

.ms-pw-toggle:hover {
	color: var(--nfs-cyan);
}

.ms-pw-toggle .eye-off {
	display: none;
}

.ms-pw-toggle.revealed .eye {
	display: none;
}

.ms-pw-toggle.revealed .eye-off {
	display: block;
}

.ms-submit {
	width: 100%;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nfs-bg);
	padding: 16px;
	border: none;
	border-radius: 999px;
	background: var(--nfs-grad-cyan-violet);
	box-shadow: 0 0 24px rgba(52, 219, 239, .45);
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
}

.ms-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 34px rgba(52, 219, 239, .6);
}

.ms-alt {
	text-align: center;
	margin-top: 20px;
}

.ms-alt-link {
	font-family: var(--nfs-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--nfs-text-muted);
	background: transparent;
	border: none;
	text-decoration: none;
	cursor: pointer;
}

.ms-alt-link:hover {
	color: var(--nfs-cyan);
}

/* Auth secondary note (e.g. "forgot password? contact an admin") */
.ms-auth-note {
	margin: 14px 0 0;
	text-align: center;
	font-family: var(--nfs-font-body);
	font-size: 13px;
	color: var(--nfs-text-faint);
}

/* Auth intro paragraph (e.g. reset-password explanation) */
.ms-auth-intro {
	margin: 0 0 22px;
	font-family: var(--nfs-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--nfs-text-muted);
}

/* ===== Inline banner (login error / suspended) ===== */

.ms-banner {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--nfs-font-body);
	font-weight: 600;
	font-size: 14px;
	border-radius: 11px;
	padding: 11px 14px;
	margin-bottom: 18px;
	animation: msBannerIn .3s ease both;
}

.ms-banner-error {
	background: rgba(255, 59, 160, .1);
	border: 1px solid rgba(255, 59, 160, .45);
	color: #ff8fc4;
}

.ms-banner-ok {
	background: rgba(62, 242, 160, .1);
	border: 1px solid rgba(62, 242, 160, .4);
	color: #7CFFB2;
}

/* Leading badge — rendered via ::before so it also applies to <form:errors>. */
.ms-banner::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	font-weight: 700;
}

.ms-banner-error::before { content: "!"; }
.ms-banner-ok::before { content: "\2713"; }

/* ===== Kicker / title variants ===== */

.ms-kicker--magenta {
	color: var(--nfs-magenta);
}

.ms-lead {
	font-family: var(--nfs-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: #bdb6d6;
	margin: 12px 0 0;
}

.ms-submit--spaced {
	margin-top: 22px;
}

.ms-submit--magenta {
	background: var(--nfs-grad-magenta-violet);
	box-shadow: 0 0 24px rgba(255, 59, 160, .45);
}

.ms-submit--magenta:hover {
	box-shadow: 0 0 34px rgba(255, 59, 160, .6);
}

/* ===== Invitation code field (join) ===== */

.ms-code {
	display: flex;
	align-items: stretch;
	background: rgba(7, 5, 15, .6);
	border: 1px solid rgba(52, 219, 239, .32);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .2s;
}

.ms-code:focus-within {
	border-color: var(--nfs-cyan);
}

.ms-code-prefix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: rgba(52, 219, 239, .1);
	font-family: var(--nfs-font-mono);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .05em;
	color: var(--nfs-cyan);
	border-right: 1px solid rgba(52, 219, 239, .3);
}

.ms-code-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	padding: 14px;
	color: var(--nfs-text);
	font-family: var(--nfs-font-mono);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.ms-code-input:focus {
	outline: none;
}

/* ===== Signup (account creation) ===== */

/* Tighter field rhythm than the login card, matching the mockup.
   Only touch vertical padding so the password fields keep their 44px right
   padding (space for the eye toggle). */
.ms-signup .ms-input {
	padding-top: 12px;
	padding-bottom: 12px;
}

.ms-signup .ms-field {
	margin-bottom: 15px;
}

.ms-signup .ms-pw {
	margin-bottom: 14px;
}

.ms-signup .ms-pw-confirm {
	margin-bottom: 10px;
}

.ms-signup .ms-submit {
	margin-top: 6px;
}

/* Live password criteria */
.ms-criteria {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 16px;
	padding: 12px 14px;
	background: rgba(7, 5, 15, .4);
	border-radius: 11px;
}

.ms-criterion {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--nfs-font-body);
	font-weight: 500;
	font-size: 14.5px;
	color: var(--nfs-text-dim);
	transition: color .2s;
}

.ms-criterion-badge {
	flex: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	border: 1.5px solid var(--nfs-text-dim);
	background: transparent;
	color: var(--nfs-bg);
	transition: .2s;
}

.ms-criterion.is-ok {
	color: #7CFFB2;
}

.ms-criterion.is-ok .ms-criterion-badge {
	border-color: #7CFFB2;
	background: #7CFFB2;
}

.ms-criterion.is-ok .ms-criterion-badge::before {
	content: "\2713";
}

/* Password match indicator */
.ms-match {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 1.2em;
	margin: 0 0 4px;
	font-family: var(--nfs-font-body);
	font-weight: 600;
	font-size: 14px;
}

.ms-match.is-ok {
	color: #7CFFB2;
}

.ms-match.is-no {
	color: var(--nfs-magenta-light);
}

/* ===== Member navbar ===== */

.ms-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px clamp(14px, 4vw, 34px);
	background: linear-gradient(rgba(9, 6, 20, .96), rgba(9, 6, 20, .85));
	backdrop-filter: blur(14px);
	border-top: 1px solid rgba(255, 59, 160, .22);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ms-nav-brand {
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nfs-cyan);
	text-decoration: none;
}

.ms-nav-links {
	display: none;
	gap: 4px;
}

.ms-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nfs-font-heading);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nfs-text-dim);
	text-decoration: none;
	padding: 9px 14px;
	border-radius: 999px;
	transition: .2s;
}

.ms-nav-link svg {
	flex: none;
}

.ms-nav-link:hover {
	color: var(--nfs-text);
}

.ms-nav-link.is-active {
	color: var(--nfs-cyan);
	background: rgba(52, 219, 239, .1);
}

.ms-nav-right {
	display: none;
	align-items: center;
	gap: 14px;
}

.ms-nav-profile {
	position: relative;
}

.ms-nav-user {
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 4px 6px 4px 4px;
	color: inherit;
	font: inherit;
	transition: .2s;
}

/* Interactive only when it is the member profile dropdown trigger. */
.ms-nav-profile .ms-nav-user {
	cursor: pointer;
}

.ms-nav-profile .ms-nav-user:hover {
	border-color: rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
}

.ms-nav-caret {
	color: var(--nfs-text-dim);
	transition: transform .2s;
}

.ms-nav-user[aria-expanded="true"] .ms-nav-caret {
	transform: rotate(180deg);
}

.ms-nav-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	padding: 6px;
	background: var(--nfs-bg-deep);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .8);
}

.ms-nav-dropdown[hidden] {
	display: none;
}

.ms-nav-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nfs-text-muted);
	text-decoration: none;
	padding: 10px 12px;
	border-radius: 8px;
	transition: .2s;
}

.ms-nav-dropdown-item svg {
	flex: none;
}

.ms-nav-dropdown-item:hover {
	color: var(--nfs-text);
	background: rgba(255, 255, 255, .05);
}

.ms-nav-dropdown-item.is-active {
	color: var(--nfs-cyan);
	background: rgba(52, 219, 239, .1);
}

.ms-nav-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--nfs-bg);
	background: var(--nfs-grad-cyan-violet);
}

.ms-nav-username {
	font-family: var(--nfs-font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--nfs-text-muted);
}

.ms-nav-logout-form {
	margin: 0;
}

.ms-nav-logout {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nfs-magenta-light);
	background: transparent;
	border: 1px solid rgba(255, 59, 160, .4);
	border-radius: 999px;
	padding: 8px 14px;
	cursor: pointer;
	transition: .2s;
}

.ms-nav-logout:hover {
	background: rgba(255, 59, 160, .12);
}

/* Hamburger (mobile) */
.ms-burger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px;
}

.ms-burger span {
	width: 24px;
	height: 2px;
	border-radius: 2px;
	display: block;
}

.ms-burger span:nth-child(1),
.ms-burger span:nth-child(3) {
	background: var(--nfs-cyan);
}

.ms-burger span:nth-child(2) {
	background: var(--nfs-magenta);
}

/* Mobile overlay menu */
.ms-menu {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 16px clamp(14px, 4vw, 34px) 22px;
	background: rgba(9, 6, 20, .96);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ms-menu[hidden] {
	display: none;
}

.ms-menu-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.ms-menu-foot form {
	margin: 0;
}

@media (min-width: 860px) {
	.ms-nav-brand,
	.ms-burger {
		display: none;
	}
	.ms-nav-links,
	.ms-nav-right {
		display: flex;
	}
	.ms-menu {
		display: none !important;
	}
}

/* ===== Dashboard ===== */

.ms-dash-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 8px;
	animation: msRevealUp .5s ease both;
}

.ms-dash-title {
	font-family: var(--nfs-font-display);
	font-weight: 400;
	font-size: clamp(36px, 6.4vw, 64px);
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.ms-role {
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
}

.ms-role--admin {
	color: var(--nfs-magenta);
	border: 1px solid rgba(255, 59, 160, .5);
	background: rgba(255, 59, 160, .1);
}

.ms-role--member {
	color: var(--nfs-cyan);
	border: 1px solid rgba(52, 219, 239, .5);
	background: rgba(52, 219, 239, .1);
}

.ms-dash-sub {
	font-family: var(--nfs-font-body);
	font-size: clamp(17px, 2.1vw, 21px);
	color: #bdb6d6;
	margin: 0 0 34px;
}

/* ===== Activity feed ===== */

.ms-feed-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.ms-feed-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3ef2a0;
	box-shadow: 0 0 10px #3ef2a0;
}

.ms-feed-title {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nfs-cyan);
	margin: 0;
}

.ms-feed-empty {
	font-family: var(--nfs-font-body);
	font-size: 17px;
	color: var(--nfs-text-dim);
	padding: 20px 0;
}

.ms-feed {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ms-feed-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: rgba(255, 255, 255, .024);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	padding: 18px 22px;
}

.ms-feed-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ms-feed-body {
	flex: 1 1 0;
	min-width: 0;
}

.ms-feed-text {
	font-family: var(--nfs-font-body);
	font-size: 17.5px;
	line-height: 1.4;
	color: var(--nfs-text);
}

.ms-feed-actor {
	font-weight: 700;
}

.ms-feed-sub {
	font-family: var(--nfs-font-heading);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .02em;
	color: var(--nfs-text-dim);
	margin-top: 2px;
}

.ms-feed-time {
	display: block;
	font-family: var(--nfs-font-mono);
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--nfs-text-faint);
	margin-top: 5px;
}

.ms-feed-view {
	flex: 0 0 auto;
	align-self: center;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--nfs-cyan);
	background: transparent;
	border: 1px solid rgba(52, 219, 239, .4);
	border-radius: 999px;
	padding: 10px 18px;
	text-decoration: none;
	transition: .2s;
}

.ms-feed-view:hover {
	background: rgba(52, 219, 239, .12);
}

/* Feed tones (icon + actor colour + subtle border) */
.ms-feed-item--green {
	border-color: rgba(62, 242, 160, .22);
}
.ms-feed-item--green .ms-feed-icon {
	background: rgba(62, 242, 160, .14);
	color: #8ff5c8;
}
.ms-feed-item--green .ms-feed-actor {
	color: #8ff5c8;
}

.ms-feed-item--magenta {
	border-color: rgba(255, 59, 160, .24);
}
.ms-feed-item--magenta .ms-feed-icon {
	background: rgba(255, 59, 160, .14);
	color: var(--nfs-magenta);
}
.ms-feed-item--magenta .ms-feed-actor {
	color: #ff8fc4;
}

.ms-feed-item--cyan .ms-feed-icon {
	background: rgba(52, 219, 239, .14);
	color: var(--nfs-cyan);
}
.ms-feed-item--cyan .ms-feed-actor {
	color: var(--nfs-cyan);
}

.ms-feed-item--grey .ms-feed-icon {
	background: rgba(255, 255, 255, .06);
	color: var(--nfs-text-dim);
}
.ms-feed-item--grey .ms-feed-actor {
	color: var(--nfs-text-muted);
}

/* ===== Sessions (list + tabs) ===== */

.ms-sessions-title {
	font-family: var(--nfs-font-display);
	font-weight: 400;
	font-size: clamp(34px, 6.2vw, 60px);
	line-height: 1;
	margin: 0 0 24px;
	text-transform: uppercase;
}

.ms-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 26px;
}

.ms-tab-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 11px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: .2s;
	border: 1px solid rgba(255, 255, 255, .14);
	background: transparent;
	color: var(--nfs-text-muted);
	text-decoration: none;
}

.ms-tab-pill:hover {
	color: var(--nfs-text);
}

.ms-tab-pill.is-active {
	border-color: transparent;
	background: var(--nfs-grad-cyan-violet);
	color: var(--nfs-bg);
}

.ms-tab-count {
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .08);
	color: var(--nfs-text-dim);
}

.ms-tab-pill.is-active .ms-tab-count {
	background: rgba(7, 5, 15, .25);
	color: var(--nfs-bg);
}

.ms-tab {
	display: none;
}

.ms-tab.is-active {
	display: block;
	animation: msRevealUp .35s ease both;
}

.ms-tab-empty {
	font-family: var(--nfs-font-body);
	font-size: 16px;
	color: var(--nfs-text-dim);
	font-style: italic;
	padding: 20px 0;
}

.ms-sessions {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Session card */
.ms-scard {
	background: rgba(255, 255, 255, .024);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	padding: 26px;
	transition: border-color .2s;
}

.ms-scard:hover {
	border-color: rgba(52, 219, 239, .3);
}

.ms-scard-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ms-scard-main {
	display: block;
	min-width: 0;
	flex: 1 1 0;
	text-decoration: none;
	color: inherit;
}

.ms-scard-main:hover .ms-scard-title {
	color: var(--nfs-cyan);
}

.ms-scard-title {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: clamp(20px, 2.8vw, 26px);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--nfs-text);
	margin: 0 0 6px;
}

.ms-scard-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nfs-font-body);
	font-size: 17px;
	color: var(--nfs-text-muted);
	margin-bottom: 4px;
}

.ms-scard-meta svg {
	flex: none;
	color: var(--nfs-cyan);
}

.ms-scard-place {
	color: var(--nfs-text-dim);
}

.ms-scard-place svg {
	color: var(--nfs-magenta);
}

.ms-scard-form {
	margin: 0;
	flex: 0 0 auto;
}

.ms-scard-btn {
	flex: 0 0 auto;
	display: inline-block;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	padding: 13px 26px;
	cursor: pointer;
	transition: .2s;
	border: 1px solid transparent;
}

.ms-scard-btn--register {
	color: var(--nfs-bg);
	background: var(--nfs-grad-cyan-violet);
	box-shadow: 0 0 18px rgba(52, 219, 239, .4);
}

.ms-scard-btn--register:hover {
	transform: translateY(-1px);
}

.ms-scard-btn--unregister {
	color: var(--nfs-magenta);
	background: transparent;
	border-color: rgba(255, 59, 160, .5);
	padding: 10px 20px;
}

.ms-scard-btn--unregister:hover {
	background: rgba(255, 59, 160, .12);
}

.ms-scard-btn--ghost {
	color: var(--nfs-cyan);
	background: transparent;
	border-color: rgba(52, 219, 239, .4);
	padding: 10px 20px;
}

.ms-scard-btn--ghost:hover {
	background: rgba(52, 219, 239, .12);
}

.ms-scard-btn--danger {
	color: var(--nfs-magenta);
	background: transparent;
	border-color: rgba(255, 59, 160, .5);
}

.ms-scard-btn--danger:hover {
	background: rgba(255, 59, 160, .12);
}

/* Delete-account modal: password field spacing */
.ms-del-form {
	margin: 20px 0 0;
}

.ms-del-form .ms-input {
	margin-top: 8px;
}

.ms-scard-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.ms-scard-empty {
	font-family: var(--nfs-font-body);
	font-size: 14.5px;
	color: var(--nfs-text-faint);
	font-style: italic;
}

.ms-scard-count {
	font-family: var(--nfs-font-body);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--nfs-text-dim);
}

.ms-avatars {
	display: flex;
}

.ms-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-left: -8px;
	border: 2px solid var(--nfs-bg-deep);
	background: linear-gradient(135deg, #34dbef, #7a5bff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--nfs-bg);
}

.ms-avatar:first-child {
	margin-left: 0;
}

/* ===== Session detail ===== */

.ms-detail {
	max-width: 800px;
	margin: 0 auto;
	animation: msRevealUp .5s ease both;
}

.ms-detail-back {
	display: inline-block;
	font-family: var(--nfs-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--nfs-text-dim);
	text-decoration: none;
	margin-bottom: 18px;
}

.ms-detail-back:hover {
	color: var(--nfs-cyan);
}

.ms-detail-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.ms-detail-titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

.ms-detail-title {
	font-family: var(--nfs-font-display);
	font-weight: 400;
	font-size: clamp(34px, 6.2vw, 56px);
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.ms-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 22px;
}

.ms-detail-metaline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nfs-font-body);
	font-size: 18px;
	color: var(--nfs-text-muted);
}

.ms-detail-metaline svg {
	flex: none;
	color: var(--nfs-cyan);
}

.ms-detail-place svg {
	color: var(--nfs-magenta);
}

.ms-detail-desc {
	font-family: var(--nfs-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: #bdb6d6;
	margin: 0 0 26px;
}

.ms-detail-form {
	margin: 0;
}

.ms-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.ms-detail-actions form {
	margin: 0;
}

.ms-detail-form .ms-scard-btn {
	padding: 13px 30px;
}

.ms-detail-people {
	margin-top: 30px;
	background: rgba(255, 255, 255, .024);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	padding: 26px;
}

.ms-detail-people-title {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--nfs-cyan);
	margin: 0 0 16px;
}

.ms-detail-empty {
	font-family: var(--nfs-font-body);
	font-size: 16px;
	color: var(--nfs-text-faint);
	font-style: italic;
	margin: 0;
}

.ms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.ms-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nfs-font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--nfs-text);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	padding: 7px 15px 7px 8px;
}

.ms-chip-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, #34dbef, #7a5bff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--nfs-bg);
}

/* ===== Settings (collapsible sections) ===== */

.ms-settings-title {
	font-family: var(--nfs-font-display);
	font-weight: 400;
	font-size: clamp(30px, 6vw, 54px);
	line-height: 1;
	margin: 0 0 24px;
	text-transform: uppercase;
}

.ms-set-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.ms-set-section {
	background: rgba(255, 255, 255, .024);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 15px;
	overflow: hidden;
	transition: border-color .2s;
}

.ms-set-section[open] {
	border-color: rgba(52, 219, 239, .28);
}

.ms-set-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 19px 22px;
	cursor: pointer;
	list-style: none;
}

.ms-set-head::-webkit-details-marker {
	display: none;
}

.ms-set-head-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ms-set-icon {
	display: flex;
}

.ms-set-icon--cyan {
	color: var(--nfs-cyan);
}

.ms-set-icon--violet {
	color: #b6a3ff;
}

.ms-set-icon--orange {
	color: #fc7a4a;
}

.ms-set-icon--danger {
	color: var(--nfs-magenta);
}

.ms-set-label {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--nfs-text);
}

.ms-set-badge {
	font-family: var(--nfs-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nfs-text-dim);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 999px;
	padding: 3px 9px;
}

.ms-set-badge.is-on {
	color: #7CFFB2;
	border-color: rgba(124, 255, 178, .45);
	background: rgba(124, 255, 178, .08);
}

.ms-set-chevron {
	font-family: var(--nfs-font-body);
	font-size: 18px;
	color: var(--nfs-text-dim);
	transition: transform .2s;
}

.ms-set-section[open] .ms-set-chevron {
	transform: rotate(180deg);
}

.ms-set-body {
	padding: 0 22px 22px;
}

.ms-set-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	font-family: var(--nfs-font-body);
	font-weight: 600;
	color: var(--nfs-text-muted);
}

.ms-set-row-key {
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nfs-text-dim);
}

.ms-set-hint {
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--nfs-text-faint);
	margin: 6px 0 0;
}

.ms-set-strava-desc {
	font-family: var(--nfs-font-body);
	font-size: 15.5px;
	line-height: 1.6;
	color: #bdb6d6;
	margin: 0 0 18px;
}

.ms-set-strava-form {
	margin: 0;
}

.ms-set-submit {
	margin-top: 18px;
}

.ms-scard-btn--strava {
	color: #fff;
	background: #fc4c02;
}

.ms-scard-btn--strava:hover {
	background: #e34500;
}

/* ===== Admin navbar extras ===== */

.ms-nav-back {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nfs-text-dim);
	text-decoration: none;
	white-space: nowrap;
}

.ms-nav-back:hover {
	color: var(--nfs-cyan);
}

.ms-menu-navlink {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nfs-text-muted);
	text-decoration: none;
	padding: 12px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ms-menu-navlink svg {
	flex: none;
}

.ms-menu-navlink.is-active {
	color: var(--nfs-cyan);
}

/* ===== Admin stat cards ===== */

.ms-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-top: 4px;
}

.ms-stat {
	border: 1px solid;
	border-radius: 16px;
	padding: 26px;
}

.ms-stat-kicker {
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.ms-stat-value {
	font-family: var(--nfs-font-display);
	font-size: 56px;
	line-height: .9;
	color: var(--nfs-text);
}

.ms-stat-sub {
	font-family: var(--nfs-font-body);
	font-size: 16px;
	color: var(--nfs-text-dim);
	margin-top: 6px;
}

.ms-stat--cyan {
	background: linear-gradient(160deg, rgba(52, 219, 239, .1), rgba(122, 91, 255, .04));
	border-color: rgba(52, 219, 239, .28);
}

.ms-stat--cyan .ms-stat-kicker {
	color: var(--nfs-cyan);
}

.ms-stat--violet {
	background: linear-gradient(160deg, rgba(122, 91, 255, .1), rgba(52, 219, 239, .04));
	border-color: rgba(122, 91, 255, .3);
}

.ms-stat--violet .ms-stat-kicker {
	color: #b6a3ff;
}

.ms-stat--magenta {
	background: linear-gradient(160deg, rgba(255, 59, 160, .1), rgba(122, 91, 255, .04));
	border-color: rgba(255, 59, 160, .3);
}

.ms-stat--magenta .ms-stat-kicker {
	color: var(--nfs-magenta);
}

/* ===== Admin table (members) ===== */

.ms-table-wrap {
	overflow-x: auto;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	background: rgba(255, 255, 255, .024);
}

.ms-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
}

.ms-table th {
	text-align: left;
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nfs-text-dim);
	padding: 16px 18px;
	white-space: nowrap;
}

.ms-table thead tr {
	background: rgba(255, 255, 255, .03);
}

.ms-table td {
	padding: 16px 18px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	vertical-align: middle;
}

.ms-mrow-user {
	display: flex;
	align-items: center;
	gap: 11px;
}

.ms-mrow-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #34dbef, #7a5bff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--nfs-bg);
}

.ms-mrow-id {
	min-width: 0;
}

.ms-mrow-nameline {
	display: flex;
	align-items: center;
	gap: 7px;
}

.ms-mrow-name {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 17px;
	color: var(--nfs-text);
}

.ms-mrow-you {
	font-family: var(--nfs-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nfs-bg);
	background: var(--nfs-cyan);
	border-radius: 999px;
	padding: 2px 7px;
}

.ms-mrow-email {
	font-family: var(--nfs-font-body);
	font-size: 15px;
	color: var(--nfs-text-faint);
}

.ms-last {
	font-family: var(--nfs-font-body);
	font-size: 15px;
	color: var(--nfs-text-dim);
	white-space: nowrap;
}

.ms-badge {
	font-family: var(--nfs-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid;
	white-space: nowrap;
}

.ms-badge--admin {
	color: var(--nfs-magenta);
	background: rgba(255, 59, 160, .1);
	border-color: rgba(255, 59, 160, .4);
}

.ms-badge--member {
	color: var(--nfs-cyan);
	background: rgba(52, 219, 239, .1);
	border-color: rgba(52, 219, 239, .4);
}

.ms-badge--active {
	color: #8ff5c8;
	background: rgba(62, 242, 160, .1);
	border-color: rgba(62, 242, 160, .4);
}

.ms-badge--off {
	color: var(--nfs-text-dim);
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .15);
}

.ms-badge--hidden {
	color: var(--nfs-text-muted);
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .22);
}

.ms-badge--private {
	color: #b6a3ff;
	background: rgba(122, 91, 255, .12);
	border-color: rgba(122, 91, 255, .45);
}

/* ===== Session options — toggle switches + field help ===== */

.ms-optrow {
	margin-top: 18px;
	margin-bottom: 16px;
}

.ms-switch {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.ms-switch-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ms-switch-track {
	position: relative;
	flex: none;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	transition: background .2s, border-color .2s;
}

.ms-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--nfs-text-dim);
	transition: left .2s, background .2s;
}

.ms-switch:has(.ms-switch-input:checked) .ms-switch-track {
	background: var(--nfs-grad-cyan-violet);
	border-color: transparent;
}

.ms-switch:has(.ms-switch-input:checked) .ms-switch-thumb {
	left: 22px;
	background: #fff;
}

.ms-switch:has(.ms-switch-input:focus-visible) .ms-switch-track {
	outline: 2px solid var(--nfs-cyan);
	outline-offset: 2px;
}

.ms-switch-text {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--nfs-text);
}

.ms-field-help {
	margin: 6px 0 0;
	font-family: var(--nfs-font-body);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--nfs-text-dim);
}

.ms-strava-yes {
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	color: #fc7a4a;
}

.ms-strava-no {
	color: var(--nfs-text-faint);
}

.ms-mactions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
}

.ms-mactions .ms-mbtn {
	width: 100%;
}

.ms-mactions form {
	margin: 0;
}

.ms-mbtn {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 9px 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: .2s;
}

.ms-mbtn--role {
	color: var(--nfs-cyan);
	border-color: rgba(52, 219, 239, .4);
}

.ms-mbtn--role:hover {
	background: rgba(52, 219, 239, .12);
}

.ms-mbtn--disable {
	color: var(--nfs-magenta);
	border-color: rgba(255, 59, 160, .45);
}

.ms-mbtn--disable:hover {
	background: rgba(255, 59, 160, .12);
}

.ms-mbtn--enable {
	color: #8ff5c8;
	border-color: rgba(62, 242, 160, .4);
}

.ms-mbtn--enable:hover {
	background: rgba(62, 242, 160, .12);
}

.ms-noactions {
	font-family: var(--nfs-font-body);
	font-size: 13px;
	color: var(--nfs-text-faint);
	font-style: italic;
}

/* ===== Admin invitation codes ===== */

.ms-inv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.ms-iform {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.ms-iform-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 200px;
	min-width: 0;
}

.ms-iform-field--sm {
	flex: 0 1 140px;
}

.ms-icards {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.ms-icard {
	background: rgba(255, 255, 255, .024);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 15px;
	padding: 18px 20px;
}

.ms-icard-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ms-icard-main {
	min-width: 0;
	flex: 1 1 0;
}

.ms-icard-codeline {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.ms-icard-code {
	font-family: var(--nfs-font-mono);
	font-weight: 700;
	font-size: clamp(18px, 2.6vw, 22px);
	letter-spacing: .08em;
	color: var(--nfs-cyan);
}

.ms-icard-label {
	font-family: var(--nfs-font-body);
	font-size: 15px;
	color: var(--nfs-text-muted);
	margin-bottom: 6px;
}

.ms-icard-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--nfs-font-mono);
	font-size: 12px;
	color: var(--nfs-text-dim);
}

.ms-icard-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

.ms-icard-actions form {
	margin: 0;
}

.ms-icard-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nfs-cyan);
	background: transparent;
	border: 1px solid rgba(52, 219, 239, .4);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	transition: .2s;
}

.ms-icard-copy:hover {
	background: rgba(52, 219, 239, .12);
}

.ms-icard-revoke {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nfs-magenta);
	background: transparent;
	border: 1px solid rgba(255, 59, 160, .45);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	transition: .2s;
}

.ms-icard-revoke:hover {
	background: rgba(255, 59, 160, .12);
}

.ms-badge--revoked {
	color: var(--nfs-magenta);
	background: rgba(255, 59, 160, .1);
	border-color: rgba(255, 59, 160, .4);
}

/* ===== Admin sessions list ===== */

.ms-asess {
	background: rgba(255, 255, 255, .024);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 16px;
	padding: 20px 22px;
}

.ms-asess-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ms-asess-main {
	min-width: 0;
	flex: 1 1 0;
	display: block;
	text-decoration: none;
	color: inherit;
}

.ms-asess-main:hover .ms-asess-title {
	color: var(--nfs-cyan);
}

.ms-asess-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.ms-asess-title {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: clamp(18px, 2.6vw, 22px);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--nfs-text);
	margin: 0;
}

.ms-asess-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.ms-asess-metaitem {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--nfs-font-body);
	font-size: 15px;
	color: var(--nfs-text-muted);
}

.ms-asess-metaitem svg {
	flex: none;
	color: var(--nfs-cyan);
}

.ms-asess-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

/* ===== Session actions dropdown (list card + detail) ===== */

.ms-actions {
	position: relative;
	flex: 0 0 auto;
}

.ms-actions-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: transparent;
	color: var(--nfs-text-dim);
	cursor: pointer;
	transition: .2s;
}

.ms-actions-toggle:hover,
.ms-actions-toggle[aria-expanded="true"] {
	color: var(--nfs-text);
	border-color: rgba(52, 219, 239, .4);
	background: rgba(52, 219, 239, .1);
}

.ms-actions-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	min-width: 194px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--nfs-bg-deep);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
}

.ms-actions-menu[hidden] {
	display: none;
}

.ms-actions-menu form {
	margin: 0;
}

.ms-actions-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 11px;
	border: none;
	background: transparent;
	border-radius: 8px;
	font-family: var(--nfs-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--nfs-text-muted);
	text-decoration: none;
	cursor: pointer;
	text-align: left;
	transition: .15s;
}

.ms-actions-item svg {
	flex: none;
	color: var(--nfs-cyan);
}

.ms-actions-item:hover {
	background: rgba(255, 255, 255, .06);
	color: var(--nfs-text);
}

.ms-actions-item--danger {
	color: var(--nfs-magenta-light);
}

.ms-actions-item--danger svg {
	color: var(--nfs-magenta);
}

.ms-actions-item--danger:hover {
	background: rgba(255, 59, 160, .1);
	color: var(--nfs-magenta-light);
}

.ms-asess-actions form {
	margin: 0;
}

.ms-asess-people {
	margin-top: 15px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.ms-asess-empty {
	font-family: var(--nfs-font-body);
	font-size: 14px;
	color: var(--nfs-text-faint);
	font-style: italic;
}

/* ===== Modal ===== */

.ms-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 5, 15, .8);
	backdrop-filter: blur(6px);
}

.ms-modal-overlay[hidden] {
	display: none;
}

.ms-modal {
	width: 100%;
	max-width: 460px;
	background: var(--nfs-bg-deep);
	border: 1px solid rgba(255, 59, 160, .35);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 0 50px -12px rgba(255, 59, 160, .5);
}

.ms-modal-title {
	font-family: var(--nfs-font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.6rem;
	margin: 0 0 12px;
}

.ms-modal-msg {
	font-family: var(--nfs-font-body);
	font-size: 16px;
	color: var(--nfs-text-muted);
	line-height: 1.5;
	margin: 0;
}

.ms-modal-target {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	color: var(--nfs-text);
	margin: 10px 0 0;
}

.ms-modal-target:empty {
	display: none;
}

.ms-modal-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 24px;
}

.ms-modal-actions .ms-mbtn {
	padding: 12px 22px;
	font-size: 14px;
}

.ms-modal-cancel {
	color: var(--nfs-text-muted);
	border-color: rgba(255, 255, 255, .18);
}

.ms-modal-cancel:hover {
	background: rgba(255, 255, 255, .06);
}

/* Wider modal hosting a form (create / edit a session) */
.ms-modal--form {
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
}

.ms-textarea {
	min-height: 90px;
	resize: vertical;
	line-height: 1.5;
}

/* ===== List search bar (top) ===== */

.ms-listbar {
	margin-bottom: 16px;
}

.ms-search {
	position: relative;
}

.ms-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--nfs-text-faint);
	pointer-events: none;
}

.ms-search-input {
	width: 100%;
	background: rgba(7, 5, 15, .6);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	padding: 12px 40px 12px 42px;
	color: var(--nfs-text);
	font-family: var(--nfs-font-body);
	font-size: 16px;
	font-weight: 500;
	transition: border-color .2s;
}

.ms-search-input:focus {
	outline: none;
	border-color: var(--nfs-cyan);
}

/* ===== Pager (bottom) ===== */

.ms-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.ms-pager-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ms-pager-total {
	font-family: var(--nfs-font-mono);
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--nfs-text-dim);
}

.ms-pager-size {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.ms-pager-size-label {
	font-family: var(--nfs-font-heading);
	font-weight: 500;
	font-size: 13.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nfs-text-dim);
	white-space: nowrap;
}

.ms-pager-size-wrap {
	position: relative;
	display: inline-flex;
}

.ms-pager-select {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(7, 5, 15, .6);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 11px;
	padding: 10px 34px 10px 14px;
	color: var(--nfs-text);
	font-family: var(--nfs-font-mono);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: border-color .2s;
}

.ms-pager-select:focus {
	outline: none;
	border-color: var(--nfs-cyan);
}

.ms-pager-select-caret {
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--nfs-cyan);
	pointer-events: none;
}

.ms-pager-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ms-pager-btn {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--nfs-cyan);
	text-decoration: none;
	background: transparent;
	border: 1px solid rgba(52, 219, 239, .4);
	border-radius: 999px;
	padding: 10px 18px;
	transition: .2s;
}

.ms-pager-btn:hover {
	background: rgba(52, 219, 239, .12);
}

.ms-pager-btn.is-disabled {
	color: var(--nfs-text-faint);
	border-color: rgba(255, 255, 255, .12);
	cursor: default;
	pointer-events: none;
}

.ms-pager-pages {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 2px;
}

.ms-page-num {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nfs-font-mono);
	font-size: 14px;
	font-weight: 700;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: transparent;
	color: var(--nfs-text-muted);
	text-decoration: none;
	transition: .2s;
}

.ms-page-num:hover {
	border-color: rgba(52, 219, 239, .4);
	color: var(--nfs-text);
}

.ms-page-num.is-active {
	border-color: transparent;
	background: var(--nfs-grad-cyan-violet);
	color: var(--nfs-bg);
}

.ms-page-ellipsis {
	font-family: var(--nfs-font-mono);
	font-size: 14px;
	color: var(--nfs-text-faint);
	padding: 0 4px;
}

.ms-pager-caption {
	width: 100%;
	text-align: right;
	font-family: var(--nfs-font-mono);
	font-size: 12.5px;
	letter-spacing: .06em;
	color: var(--nfs-text-faint);
	margin: 8px 0 0;
}

/* Dynamic search: subtle fade while results are refreshing */
#ms-list-results {
	transition: opacity .15s ease;
}

#ms-list-results.is-loading {
	opacity: .5;
	pointer-events: none;
}

/* ===== Empty state (no items / no search result) ===== */

.ms-empty {
	text-align: center;
	padding: 72px 22px;
	border: 1px dashed rgba(255, 255, 255, .14);
	border-radius: 16px;
	background: rgba(255, 255, 255, .016);
}

.ms-empty-badge {
	width: 58px;
	height: 58px;
	margin: 0 auto 18px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 59, 160, .1);
	color: var(--nfs-magenta);
}

.ms-empty-text {
	font-family: var(--nfs-font-heading);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--nfs-text-muted);
	margin: 0;
}

/* ===== Rich-text editor (Quill, dark synthwave theme) ===== */

.ms-editor .ql-toolbar.ql-snow {
	border: 1px solid rgba(255, 255, 255, .14);
	border-bottom: none;
	border-radius: 12px 12px 0 0;
	background: rgba(7, 5, 15, .6);
}

.ms-editor .ql-container.ql-snow {
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 0 0 12px 12px;
	background: rgba(7, 5, 15, .6);
	font-family: var(--nfs-font-body);
	font-size: 15px;
}

.ms-editor .ql-editor {
	min-height: 150px;
	color: var(--nfs-text);
	line-height: 1.55;
}

.ms-editor .ql-editor.ql-blank::before {
	color: var(--nfs-text-faint);
	font-style: normal;
}

.ms-editor .ql-snow .ql-stroke {
	stroke: var(--nfs-text-dim);
}

.ms-editor .ql-snow .ql-fill {
	fill: var(--nfs-text-dim);
}

.ms-editor .ql-snow button:hover .ql-stroke,
.ms-editor .ql-snow button.ql-active .ql-stroke {
	stroke: var(--nfs-cyan);
}

.ms-editor .ql-snow button:hover .ql-fill,
.ms-editor .ql-snow button.ql-active .ql-fill {
	fill: var(--nfs-cyan);
}

.ms-editor .ql-editor a {
	color: var(--nfs-cyan);
}

.ms-editor .ql-snow .ql-tooltip {
	background: var(--nfs-bg-deep);
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--nfs-text);
	box-shadow: 0 10px 34px -12px rgba(0, 0, 0, .85);
}

.ms-editor .ql-snow .ql-tooltip input[type=text] {
	background: rgba(7, 5, 15, .6);
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--nfs-text);
}

.ms-editor .ql-snow .ql-tooltip a.ql-action,
.ms-editor .ql-snow .ql-tooltip a.ql-remove {
	color: var(--nfs-cyan);
}

/* ===== Rendered rich text (session description) ===== */

.ms-richtext p {
	margin: 0 0 8px;
}

.ms-richtext p:last-child {
	margin-bottom: 0;
}

.ms-richtext ul,
.ms-richtext ol {
	margin: 0 0 8px;
	padding-left: 22px;
}

.ms-richtext li {
	margin: 2px 0;
}

.ms-richtext a {
	color: var(--nfs-cyan);
	text-decoration: underline;
}

.ms-richtext strong {
	font-weight: 700;
}

/* ===== Keyframes ===== */

@keyframes msGridMove {
	0% { background-position: 0 0; }
	100% { background-position: 0 42px, 42px 0; }
}

@keyframes msGlowPulse {
	0%, 100% { filter: drop-shadow(0 0 14px rgba(52, 219, 239, .45)); }
	50% { filter: drop-shadow(0 0 26px rgba(255, 59, 160, .55)); }
}

@keyframes msRevealUp {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes msBannerIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}