.nswf-cm-box {
	max-width: 640px;
	margin: 1.5em auto;
	padding: 1.4em 1.6em;
	background: #1b1b22;
	border: 1px solid #34343f;
	border-radius: 12px;
}

.nswf-cm-btn {
	display: inline-block;
	padding: 0.65em 1.3em;
	border-radius: 8px;
	background: #f59e0b;
	color: #1b1204;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-size: 0.95em;
}
.nswf-cm-btn:hover { background: #fbbf24; color: #1b1204; }
.nswf-cm-btn-ghost {
	background: transparent;
	border: 1px solid #34343f;
	color: #fff;
}
.nswf-cm-btn-ghost:hover,
.nswf-cm-btn-ghost:focus-visible {
	background: #f59e0b;
	border-color: #f59e0b;
	color: #1b1204;
}
.nswf-cm-btn-discord { background: #5865F2; color: #fff; }
.nswf-cm-btn-discord:hover { background: #7289ff; color: #fff; }

.nswf-cm-login-box { text-align: center; }
.nswf-cm-login-box p { color: #b8b8c2; margin-bottom: 1em; }

.nswf-cm-intro { max-width: 640px; margin: 0 auto 1em; }
.nswf-cm-note {
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: 10px;
	padding: 1em 1.2em;
	margin-bottom: 0.9em;
	color: #d6d6de;
}
.nswf-cm-note strong { color: #fbbf24; display: block; margin-bottom: 0.3em; }
.nswf-cm-note p { margin: 0; line-height: 1.5; }
.nswf-cm-pay-links { margin-top: 0.8em !important; display: flex; gap: 0.6em; flex-wrap: wrap; }

.nswf-cm-form .nswf-cm-field { margin-bottom: 1em; display: flex; flex-direction: column; gap: 0.4em; }
.nswf-cm-form label { font-weight: 600; color: #fff; font-size: 0.92em; }
.nswf-cm-hint { color: #8e8ea0; font-size: 0.82em; }
.nswf-cm-form input[type="text"],
.nswf-cm-form select,
.nswf-cm-form textarea {
	background: #0f0f14;
	border: 1px solid #34343f;
	border-radius: 8px;
	padding: 0.6em 0.8em;
	color: #fff;
	font-family: inherit;
	font-size: 0.95em;
}
.nswf-cm-form textarea { resize: vertical; }
.nswf-cm-hp { position: absolute; left: -9999px; }
.nswf-cm-form-msg { margin-top: 0.8em; font-weight: 600; min-height: 1.2em; }
.nswf-cm-form-msg.is-success { color: #3dba6e; }
.nswf-cm-form-msg.is-error { color: #e2555a; }

.nswf-cm-anchor { display: block; position: relative; top: -80px; visibility: hidden; }

/* "How it works" slider */
.nswf-cm-how {
	max-width: 640px;
	margin: 0 auto 1.8em;
}
/* Force border-box sizing within the slider regardless of the theme's
   own reset - without it, a slide's padding is added on top of its
   100% width instead of counted inside it, which throws slide 2+ out
   of alignment with where the translateX math expects them to land
   (looks like "next" does nothing, when it actually moved - just not
   into the visible frame). */
.nswf-cm-how,
.nswf-cm-how *,
.nswf-cm-how *::before,
.nswf-cm-how *::after {
	box-sizing: border-box;
}
.nswf-cm-how-track-wrap {
	display: flex;
	align-items: center;
	gap: 0.6em;
}
/* The clipping mask: this element must stay put on screen. Its size is
   what anchors the slide width math, and overflow:hidden is what hides
   the other slides - it must NOT also carry the transform, or the mask
   itself slides away along with its contents (that was the actual bug:
   translating an overflow:hidden element moves its whole box, clip
   included, instead of revealing the next slide through a fixed window). */
.nswf-cm-how-viewport {
	flex: 1;
	overflow: hidden;
	border-radius: 12px;
}
/* The sliding row: only this element gets translateX'd. */
.nswf-cm-how-track {
	display: flex;
	transition: transform 0.35s ease;
}
.nswf-cm-how-track > .nswf-cm-how-slide {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	transition: none;
}
.nswf-cm-how-slide {
	background: #1b1b22;
	border: 1px solid #34343f;
	border-radius: 12px;
	padding: 2em 1.6em;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	min-height: 180px;
	justify-content: center;
}
.nswf-cm-how-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 999px;
	background: rgba(245, 158, 11, 0.15);
	color: #fbbf24;
	font-weight: 700;
	font-size: 0.85em;
}
.nswf-cm-how-icon { font-size: 2em; line-height: 1; margin-top: 0.1em; }
.nswf-cm-how-title { margin: 0.2em 0 0; color: #fff; font-size: 1.1em; }
.nswf-cm-how-text { margin: 0; color: #b8b8c2; font-size: 0.92em; line-height: 1.5; max-width: 32em; }

.nswf-cm-how-arrow {
	flex: 0 0 auto;
	width: 2.4em;
	height: 2.4em;
	border-radius: 999px;
	background: #1b1b22;
	border: 1px solid #34343f;
	color: #fff;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nswf-cm-how-arrow:hover { border-color: #f59e0b; color: #fbbf24; }

.nswf-cm-how-dots {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin-top: 1em;
}
.nswf-cm-how-dot {
	width: 0.55em;
	height: 0.55em;
	border-radius: 999px;
	background: #34343f;
	border: none;
	padding: 0;
	cursor: pointer;
}
.nswf-cm-how-dot.is-active { background: #f59e0b; }

@media (max-width: 480px) {
	.nswf-cm-how-arrow { display: none; }
}

/* CTA card */
.nswf-cm-cta-card {
	display: flex;
	align-items: center;
	gap: 0.9em;
	max-width: 640px;
	margin: 1.5em auto;
	padding: 1.1em 1.4em;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(27, 27, 34, 0.4));
	border: 1px solid rgba(245, 158, 11, 0.35);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.nswf-cm-cta-card:hover { border-color: #f59e0b; }
.nswf-cm-cta-icon { font-size: 1.6em; }
.nswf-cm-cta-text { display: flex; flex-direction: column; gap: 0.2em; flex: 1; }
.nswf-cm-cta-text strong { color: #fff; font-size: 1.05em; }
.nswf-cm-cta-text span { color: #b8b8c2; font-size: 0.88em; }
.nswf-cm-cta-arrow { color: #fbbf24; font-size: 1.2em; }
.nswf-cm-cta-card.is-compact { padding: 0.8em 1.2em; }
.nswf-cm-cta-card.is-compact .nswf-cm-cta-text span { display: none; }

/* My Commissions status list */
.nswf-cm-status-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9em; }
.nswf-cm-empty { color: #b8b8c2; text-align: center; padding: 2em 0; }
.nswf-cm-status-card {
	padding: 1.1em 1.3em;
	background: #1b1b22;
	border: 1px solid #34343f;
	border-radius: 12px;
}
.nswf-cm-card-meta { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em; flex-wrap: wrap; color: #8e8ea0; font-size: 0.82em; }
.nswf-cm-status-pill,
.nswf-cm-cat-pill {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
}
.nswf-cm-cat-pill { background: #2b2b35; color: #b8b8c2; }
.nswf-cm-card-title { margin: 0 0 0.3em; color: #fff; font-size: 1.05em; }
.nswf-cm-dev-note {
	background: rgba(245, 158, 11, 0.1);
	border-left: 3px solid #f59e0b;
	padding: 0.5em 0.8em;
	border-radius: 0 6px 6px 0;
	font-size: 0.88em;
	color: #d6d6de;
	margin: 0.4em 0 0;
}