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

.nswf-sb-btn {
	display: inline-block;
	padding: 0.65em 1.3em;
	border-radius: 8px;
	background: #5865F2;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-size: 0.95em;
}
.nswf-sb-btn:hover { background: #7289ff; color: #fff; }
.nswf-sb-btn-ghost {
	background: transparent;
	border: 1px solid #34343f;
	color: #fff;
}
.nswf-sb-btn-ghost:hover { border-color: #5865F2; }

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

.nswf-sb-form .nswf-sb-field { margin-bottom: 1em; display: flex; flex-direction: column; gap: 0.4em; }
.nswf-sb-form label { font-weight: 600; color: #fff; font-size: 0.92em; }
.nswf-sb-form input[type="text"],
.nswf-sb-form select,
.nswf-sb-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-sb-form textarea { resize: vertical; }
.nswf-sb-hp { position: absolute; left: -9999px; }
.nswf-sb-form-msg { margin-top: 0.8em; font-weight: 600; min-height: 1.2em; }
.nswf-sb-form-msg.is-success { color: #3dba6e; }
.nswf-sb-form-msg.is-error { color: #e2555a; }

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

.nswf-sb-back-link { max-width: 640px; margin: -0.6em auto 1.5em; text-align: center; }
.nswf-sb-back-link a { color: #8e8ea0; font-size: 0.9em; text-decoration: none; }
.nswf-sb-back-link a:hover { color: #b8b8c2; }

/* Split layout: form on the left, board on the right (layout="split").
   The form keeps a fixed-width column; the board column takes ALL the
   remaining width. Only pages that contain this layout are affected -
   nothing here touches the theme's <main> or any other page. */
.nswf-sb-split {
	--nswf-sb-form-w: 340px;
	--nswf-sb-max-w: 1800px;
	display: grid;
	grid-template-columns: var(--nswf-sb-form-w) minmax(0, 1fr);
	gap: 2em;
	align-items: start;
	box-sizing: border-box;
	/* Break out of the theme's content column so the layout can use the
	   screen width, while staying centered on the viewport. */
	/* !important so a theme / Tailwind / Additional-CSS rule can't squeeze
	   it back into a narrow column. To limit the width, change
	   --nswf-sb-max-w above instead. */
	width: 100vw !important;
	max-width: var(--nswf-sb-max-w) !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding-left: 1.5em;
	padding-right: 1.5em;
}
/* 100vw includes the scrollbar; stop that from adding a sideways scroll,
   on pages with this layout only. */
body:has(.nswf-sb-split) { overflow-x: clip; }
.nswf-sb-split-form { position: sticky; top: 1.5em; min-width: 0; }
.nswf-sb-split-form .nswf-sb-box,
.nswf-sb-split-form .nswf-sb-login-box { margin: 0; max-width: none; }
.nswf-sb-split-board { min-width: 0; }
.nswf-sb-split-board .nswf-sb-board { margin: 0; max-width: none; width: 100%; }
@media (max-width: 860px) {
	.nswf-sb-split { grid-template-columns: 1fr; }
	.nswf-sb-split-form { position: static; }
}

/* Board */
.nswf-sb-board { max-width: 780px; margin: 0 auto; }
.nswf-sb-board-intro {
	color: #b8b8c2;
	font-size: 0.92em;
	margin: 0 0 1em;
}
.nswf-sb-board-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 1.4em;
}
.nswf-sb-submit-link { margin-left: auto; }
@media (max-width: 560px) {
	.nswf-sb-submit-link { margin-left: 0; width: 100%; text-align: center; }
}
.nswf-sb-board-filters select {
	background: #0f0f14;
	border: 1px solid #34343f;
	border-radius: 8px;
	padding: 0.5em 0.7em;
	color: #fff;
	font-size: 0.9em;
}
.nswf-sb-empty { color: #b8b8c2; text-align: center; padding: 2em 0; }

/* Search bar: full-width row above the dropdowns */
.nswf-sb-search { position: relative; flex: 1 1 100%; }
.nswf-sb-board-filters .nswf-sb-search-input {
	width: 100%;
	box-sizing: border-box;
	background: #0f0f14;
	border: 1px solid #34343f;
	border-radius: 8px;
	padding: 0.65em 2.4em 0.65em 2.4em;
	color: #fff;
	font-family: inherit;
	font-size: 0.95em;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8ea0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.8em center;
}
.nswf-sb-search-input::placeholder { color: #8e8ea0; }
.nswf-sb-search-input:focus { outline: none; border-color: #5865F2; box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25); }
.nswf-sb-search-input::-webkit-search-cancel-button { display: none; }
.nswf-sb-search-clear {
	position: absolute;
	right: 0.4em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.9em;
	height: 1.9em;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #b8b8c2;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
}
.nswf-sb-search-clear:hover { color: #fff; background: #2b2b35; }
.nswf-sb-search-clear[hidden] { display: none; }
.nswf-sb-results.is-loading { opacity: 0.55; transition: opacity 0.15s ease; }
.nswf-sb-empty .nswf-sb-search-reset { color: #aab2ff; margin-left: 0.4em; }


.nswf-sb-cards { display: flex; flex-direction: column; gap: 0.9em; }

.nswf-sb-card {
	display: flex;
	gap: 1em;
	padding: 1.1em 1.3em;
	background: #1b1b22;
	border: 1px solid #34343f;
	border-radius: 12px;
}

.nswf-sb-vote-btn {
	flex: 0 0 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	height: 56px;
	background: #0f0f14;
	border: 1px solid #34343f;
	border-radius: 10px;
	color: #b8b8c2;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.nswf-sb-vote-btn:hover { border-color: #5865F2; color: #fff; }
.nswf-sb-vote-btn.is-voted {
	background: rgba(88, 101, 242, 0.15);
	border-color: #5865F2;
	color: #7289ff;
}
.nswf-sb-vote-arrow { font-size: 0.8em; line-height: 1; }
.nswf-sb-vote-count { font-weight: 700; font-size: 1.05em; }

.nswf-sb-card-body { flex: 1; min-width: 0; }
.nswf-sb-card-meta { display: flex; gap: 0.5em; margin-bottom: 0.5em; flex-wrap: wrap; }
.nswf-sb-status-pill,
.nswf-sb-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-sb-cat-pill { background: #2b2b35; color: #b8b8c2; }

.nswf-sb-discord-votes {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	background: rgba(88, 101, 242, 0.12);
	color: #aab2ff;
}

.nswf-sb-card-title { margin: 0 0 0.3em; color: #fff; font-size: 1.1em; }
.nswf-sb-card-desc { margin: 0 0 0.6em; color: #b8b8c2; font-size: 0.92em; line-height: 1.5; }

.nswf-sb-dev-note {
	background: rgba(88, 101, 242, 0.1);
	border-left: 3px solid #5865F2;
	padding: 0.5em 0.8em;
	border-radius: 0 6px 6px 0;
	font-size: 0.88em;
	color: #d6d6de;
	margin: 0 0 0.6em;
}

.nswf-sb-replies { margin: 0 0 0.7em; font-size: 0.88em; }
.nswf-sb-replies summary { cursor: pointer; color: #aab2ff; font-weight: 600; }
.nswf-sb-reply {
	margin-top: 0.6em;
	padding: 0.5em 0.8em;
	background: #0f0f14;
	border: 1px solid #2b2b35;
	border-radius: 8px;
}
.nswf-sb-reply strong { color: #fff; }
.nswf-sb-reply time { color: #8e8ea0; font-size: 0.9em; }
.nswf-sb-reply p { margin: 0.3em 0 0; color: #d6d6de; line-height: 1.45; }

.nswf-sb-card-author {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.82em;
	color: #8e8ea0;
}
.nswf-sb-card-author img { border-radius: 50%; display: block; }
.nswf-sb-dot { opacity: 0.6; }

.nswf-sb-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	background: rgba(236, 72, 153, 0.15);
	color: #f472b6;
	font-weight: 700;
	font-size: 0.82em;
}

.nswf-sb-pagination {
	display: flex;
	justify-content: center;
	gap: 0.3em;
	margin-top: 1.5em;
}
.nswf-sb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	height: 2em;
	padding: 0 0.4em;
	border-radius: 6px;
	background: #1b1b22;
	border: 1px solid #34343f;
	color: #b8b8c2;
	text-decoration: none;
	font-size: 0.88em;
}
.nswf-sb-pagination .page-numbers.current { background: #5865F2; color: #fff; border-color: #5865F2; }

@media (max-width: 480px) {
	.nswf-sb-card { flex-direction: column; }
	.nswf-sb-vote-btn { flex-direction: row; width: 100%; height: 40px; }
}