/*
 * tw-campaign-creator.css
 *
 * Scoped to: .neoweaver-screen #tw-campaign-creator-wrapper
 *
 * Spinner: #tw-camp-spinner reuses tw-node-spinner.css rules via ID alias below.
 * No bespoke ring/text/keyframe rules needed here.
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper {
	--neon-green  : #adff00;
	--neon-glow   : rgba(173, 255, 0, 0.6);
	--glass-bg    : rgba(10, 15, 20, 0.85);
	--glass-border: rgba(173, 255, 0, 0.3);
	--text-main   : #e0e0e0;
	--cyan        : #00e5ff;
	--red-err     : #ff4444;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper {
	font-family    : 'Chakra Petch', sans-serif;
	color          : var(--text-main);
	width          : 100%;
	max-width      : 1200px;
	margin         : 100px auto 60px auto;
	position       : relative;
	background     : var(--glass-bg);
	backdrop-filter: blur(15px);
	border         : 1px solid var(--glass-border);
	box-shadow     : 0 0 40px rgba(0,0,0,0.9), inset 0 0 100px rgba(0,0,0,0.6);
	padding        : 60px;
	border-radius  : 12px;
	min-height: calc(100vh - 200px);
	overflow       : visible;
	box-sizing     : border-box;
	padding-bottom: 80px
}

.neoweaver-screen #tw-campaign-creator-wrapper::before {
	content   : ' ';
	display   : block;
	position  : absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background:
		linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.1) 50%),
		linear-gradient(90deg, rgba(255,0,0,0.03), rgba(0,255,0,0.01), rgba(0,0,255,0.03));
	background-size: 100% 3px, 3px 100%;
	z-index        : 2;
	pointer-events : none;
	border-radius: var(--tw-radius-xl);
}

/* ── Typography ────────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper h2 {
	color         : var(--neon-green);
	text-transform: uppercase;
	font-weight   : 700;
	font-size     : 2.2rem;
	letter-spacing: 3px;
	margin-bottom : 20px;
	text-shadow   : 0 0 15px var(--neon-glow);
}

.neoweaver-screen #tw-campaign-creator-wrapper .tw-question-text {
	font-size    : 1.15rem;
	color        : #ccc;
	margin-bottom: 36px;
	font-weight  : 300;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding-bottom: 18px;
	line-height  : 1.6;
}

.neoweaver-screen #tw-campaign-creator-wrapper .tw-helper-text {
	font-size : 0.85rem;
	color     : #888;
	margin-top: 16px;
}

.neoweaver-screen #tw-campaign-creator-wrapper .tw-link {
	color          : var(--cyan);
	text-decoration: none;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-link:hover {
	text-decoration: underline;
}

/* ── Progress bar ───────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-bar {
	margin-bottom: 48px;
	position     : relative;
	z-index      : 3;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-header {
	display        : flex;
	justify-content: space-between;
	align-items    : baseline;
	margin-bottom  : 8px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-label {
	font-size     : 0.7rem;
	letter-spacing: 0.2em;
	color         : var(--neon-green);
	text-transform: uppercase;
	opacity       : 0.7;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-blink {
	animation: tw-camp-blink 1s step-end infinite;
}
@keyframes tw-camp-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-counter {
	font-size    : 0.7rem;
	letter-spacing: 0.15em;
	color        : var(--cyan);
	font-variant-numeric: tabular-nums;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-track {
	position     : relative;
	height       : 6px;
	background   : rgba(255,255,255,0.06);
	border       : 1px solid rgba(255,255,255,0.1);
	border-radius: 0;
	margin-bottom: 10px;
	overflow     : visible;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-fill {
	position  : absolute;
	left: 0; top: 0; bottom: 0;
	background: linear-gradient(90deg, #006600, var(--neon-green));
	box-shadow: 0 0 10px var(--neon-green), 0 0 22px rgba(173,255,0,0.4);
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	z-index   : 1;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-tick {
	position  : absolute;
	top       : -4px;
	width     : 2px;
	height    : 14px;
	background: rgba(255,255,255,0.15);
	transform : translateX(-50%);
	transition: background 0.3s, box-shadow 0.3s;
	z-index   : 2;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-tick.active {
	background: var(--neon-green);
	box-shadow: 0 0 6px var(--neon-green);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-tick.current {
	background: #fff;
	box-shadow: 0 0 10px #fff, 0 0 4px var(--neon-green);
	height    : 20px;
	top       : -7px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-progress-phase {
	font-size     : 0.65rem;
	letter-spacing: 0.25em;
	color         : var(--cyan);
	text-transform: uppercase;
	opacity       : 0.6;
	text-align    : right;
}

/* ── Steps ────────────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-step {
	display: none;
	opacity: 0;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-step.active {
	display       : flex; 	flex: 1; min-height: 0;
	flex-direction: column;
	animation     : tw-camp-fadein 0.5s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
@keyframes tw-camp-fadein {
	0%   { opacity: 0; transform: scale(0.98); filter: blur(4px); }
	100% { opacity: 1; transform: scale(1);    filter: blur(0);   }
}

/* ── Text inputs ───────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-field-label {
	display       : flex;
	flex-direction: column;
	gap           : 8px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-field-label > span {
	font-size     : 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color         : var(--cyan);
	opacity       : 0.8;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-required {
	color: var(--neon-green);
}
.neoweaver-screen #tw-campaign-creator-wrapper input[type="text"],
.neoweaver-screen #tw-campaign-creator-wrapper textarea {
	background  : rgba(0,0,0,0.6);
	border      : 1px solid #444;
	border-left : 5px solid #444;
	color       : #fff;
	padding     : 14px 18px;
	font-size   : 1.1rem;
	font-family : 'Chakra Petch', sans-serif;
	width       : 100%;
	outline     : none;
	transition  : 0.3s;
	box-sizing  : border-box;
}
.neoweaver-screen #tw-campaign-creator-wrapper input[type="text"]:focus,
.neoweaver-screen #tw-campaign-creator-wrapper textarea:focus {
	border-color     : var(--neon-green);
	border-left-color: var(--neon-green);
	box-shadow       : 0 0 20px var(--neon-glow);
	background       : rgba(0,20,0,0.4);
}
/* Error state for text input */
.neoweaver-screen #tw-campaign-creator-wrapper input.tw-input--error {
	border-color     : var(--red-err);
	border-left-color: var(--red-err);
	box-shadow       : 0 0 16px rgba(255,68,68,0.35);
	background       : rgba(40,0,0,0.4);
}

/* ── Inline field error ─────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-field-error {
	display      : flex;
	align-items  : center;
	gap          : 8px;
	color        : var(--red-err);
	font-size    : 0.82rem;
	letter-spacing: 0.1em;
	margin-top   : 12px;
	margin-bottom: 4px;
	padding      : 10px 16px;
	background   : rgba(255, 68, 68, 0.08);
	border-left  : 3px solid var(--red-err);
	animation    : tw-err-in 0.25s ease both;
}
@keyframes tw-err-in {
	0%   { opacity: 0; transform: translateY(-6px); }
	100% { opacity: 1; transform: translateY(0);    }
}

/* Error outline on card grid when nothing selected */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card--error {
	border-color: var(--red-err) !important;
	box-shadow  : 0 0 10px rgba(255,68,68,0.2) inset !important;
}

/* Shake animation for grid / input */
@keyframes tw-shake {
	0%, 100% { transform: translateX(0);    }
	20%      { transform: translateX(-6px); }
	40%      { transform: translateX( 6px); }
	60%      { transform: translateX(-4px); }
	80%      { transform: translateX( 4px); }
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-shake {
	animation: tw-shake 0.4s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

/* ── Static radio card grids ──────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid {
	display: grid;
	gap    : 16px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--5 {
	grid-template-columns: repeat(5, 1fr);
}

.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-label {
	cursor     : pointer;
	perspective: 1000px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-label input {
	display: none;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-visual {
	background    : rgba(255,255,255,0.02);
	border        : 1px solid rgba(255,255,255,0.12);
	padding       : 20px 16px;
	text-align    : center;
	transition    : all 0.25s ease;
	display       : flex;
	flex-direction: column;
	align-items   : center;
	justify-content: flex-end;
	gap           : 8px;
	min-height    : 170px;
	position      : relative;
	overflow      : hidden;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-emoji {
	font-size    : 2.6rem;
	line-height  : 1;
	display      : block;
	filter       : drop-shadow(0 0 5px var(--neon-glow));
	margin-bottom: 4px;
	transition   : filter 0.25s;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-label input:checked + .tw-card-visual .tw-card-emoji {
	filter: drop-shadow(0 0 14px var(--neon-green)) brightness(1.3);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-visual strong {
	display      : block;
	font-size    : 1rem;
	color        : #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height  : 1.2;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-visual span {
	font-size  : 0.73rem;
	color      : #aaa;
	line-height: 1.4;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-label:hover .tw-card-visual {
	border-color: rgba(173,255,0,0.6);
	background  : rgba(255,255,255,0.05);
	transform   : translateY(-5px);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-label input:checked + .tw-card-visual {
	border-color: var(--neon-green);
	background  : rgba(173,255,0,0.08);
	box-shadow  : 0 0 28px rgba(173,255,0,0.18) inset, 0 0 14px rgba(173,255,0,0.22);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-label input:checked + .tw-card-visual strong {
	color      : var(--neon-green);
	text-shadow: 0 0 8px var(--neon-green);
}
/* Checked card clears error outline */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-label input:checked + .tw-card-visual.tw-card--error {
	border-color: var(--neon-green) !important;
	box-shadow  : 0 0 28px rgba(173,255,0,0.18) inset, 0 0 14px rgba(173,255,0,0.22) !important;
}

/* ── Dynamic card grids (nodes / agents) ──────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dynamic-grid {
	display              : grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap                  : 16px;
	max-height           : 440px;
	overflow-y           : auto;
	padding              : 4px 2px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-loading-state {
	grid-column  : 1 / -1;
	display      : flex;
	align-items  : center;
	gap          : 12px;
	font-size    : 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color        : #888;
	padding      : 30px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-loading-dot {
	width        : 10px;
	height       : 10px;
	border-radius: 50%;
	background   : var(--neon-green);
	animation    : tw-camp-dot 1.2s ease-in-out infinite;
	flex-shrink  : 0;
}
@keyframes tw-camp-dot {
	0%, 100% { opacity: 0.2; transform: scale(0.8); }
	50%      { opacity: 1;   transform: scale(1.2); }
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-card {
	background    : rgba(255,255,255,0.02);
	border        : 1px solid rgba(255,255,255,0.12);
	padding       : 18px 14px;
	text-align    : center;
	cursor        : pointer;
	transition    : all 0.25s ease;
	display       : flex;
	flex-direction: column;
	align-items   : center;
	gap           : 8px;
	min-height    : 130px;
	justify-content: center;
	position      : relative;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-card:hover {
	border-color: rgba(173,255,0,0.5);
	background  : rgba(255,255,255,0.05);
	transform   : translateY(-4px);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-card.selected {
	border-color: var(--neon-green);
	background  : rgba(173,255,0,0.09);
	box-shadow  : 0 0 28px rgba(173,255,0,0.18) inset, 0 0 14px rgba(173,255,0,0.22);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-icon {
	font-size: 2.2rem;
	line-height: 1;
	filter   : drop-shadow(0 0 5px var(--neon-glow));
	transition: filter 0.25s;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-card.selected .tw-dyn-icon {
	filter: drop-shadow(0 0 12px var(--neon-green)) brightness(1.3);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-card strong {
	font-size    : 0.92rem;
	color        : #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-card.selected strong {
	color      : var(--neon-green);
	text-shadow: 0 0 8px var(--neon-green);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-dyn-card span {
	font-size  : 0.72rem;
	color      : #999;
	line-height: 1.4;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-error-msg {
	grid-column: 1 / -1;
	color      : var(--red-err);
	font-size  : 0.85rem;
	padding    : 20px;
}

/* ── Summary screen ────────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-grid {
	display       : flex;
	flex-direction: column;
	gap           : 0;
	border        : 1px solid rgba(173,255,0,0.2);
	border-radius : 4px;
	overflow      : hidden;
	font-size     : 0.9rem;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row {
	display             : grid;
	grid-template-columns: 160px 1fr auto;
	align-items         : center;
	gap                 : 16px;
	padding             : 12px 20px;
	border-bottom       : 1px solid rgba(255,255,255,0.05);
	transition          : background 0.2s;
	position            : relative;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row:last-child { border-bottom: none; }
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row:nth-child(odd)  { background: rgba(0,0,0,0.35); }
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row:hover           { background: rgba(173,255,0,0.04); }
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row::before {
	content   : '';
	position  : absolute;
	left: 0; top: 0; bottom: 0;
	width     : 3px;
	background: rgba(173,255,0,0.15);
	transition: background 0.2s;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row:hover::before { background: var(--neon-green); }
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-key {
	font-size     : 0.62rem;
	letter-spacing: 0.2em;
	color         : var(--cyan);
	text-transform: uppercase;
	opacity       : 0.8;
	font-weight   : 700;
	white-space   : nowrap;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-val {
	color        : #e8e8e8;
	font-size    : 0.9rem;
	letter-spacing: 0.04em;
	overflow     : hidden;
	text-overflow: ellipsis;
	white-space  : nowrap;
}
.neoweaver-screen #tw-campaign-creator-wrapper [data-summary-field="customize"] .tw-summary-val {
	white-space: normal;
	font-size  : 0.8rem;
	color      : #aaa;
	line-height: 1.5;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-edit {
	background  : transparent;
	border      : 1px solid rgba(173,255,0,0.3);
	color       : var(--neon-green);
	font-family : 'Chakra Petch', sans-serif;
	font-size   : 0.68rem;
	letter-spacing: 0.15em;
	padding     : 4px 10px;
	cursor      : pointer;
	white-space : nowrap;
	transition  : 0.2s;
	text-transform: uppercase;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-edit:hover {
	background  : var(--neon-green);
	color       : #000;
	border-color: var(--neon-green);
	box-shadow  : 0 0 12px var(--neon-green);
}

/* ── Navigation row ───────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-nav-row {
	display        : flex;
	flex-grow: 1;
	justify-content: space-between;
	align-items    : center;
	margin-top     : 44px;
	border-top     : 1px solid rgba(255,255,255,0.1);
	padding-top    : 28px;
	position       : relative;
	z-index        : 5;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-nav {
	background    : transparent;
	border        : 2px solid var(--neon-green);
	color         : var(--neon-green);
	padding       : 12px 38px;
	font-family   : 'Chakra Petch', sans-serif;
	font-weight   : 700;
	font-size     : 1rem;
	cursor        : pointer;
	text-transform: uppercase;
	letter-spacing: 2px;
	clip-path     : polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
	transition    : 0.3s;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-nav:hover {
	background: var(--neon-green);
	color     : #000;
	box-shadow: 0 0 36px var(--neon-green);
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-deploy {
	border-color  : var(--cyan);
	color         : var(--cyan);
	font-size     : 1.1rem;
	padding       : 14px 52px;
	letter-spacing: 3px;
}
.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-deploy:hover {
	background: var(--cyan);
	color     : #000;
	box-shadow: 0 0 36px var(--cyan);
}

/* ── Status line ──────────────────────────────────────────────────────────────── */
.neoweaver-screen #tw-campaign-creator-wrapper .tw-camp-status {
	margin-top    : 18px;
	font-size     : 0.85rem;
	letter-spacing: 0.1em;
	min-height    : 1.4em;
	color         : var(--neon-green);
}

/* ── Spinner — ID alias for tw-node-spinner.css ──────────────────────────────
   tw-campaign-creator.js creates #tw-camp-spinner with the same inner HTML
   structure as #tw-node-spinner. The rules below make it behave identically
   to the world-creator spinner without duplicating any animation keyframes. */
#tw-camp-spinner {
	position       : fixed;
	inset          : 0;
	background     : radial-gradient(circle at center, rgba(0, 20, 0, 0.97), rgba(0, 0, 0, 0.99));
	display        : flex;
	align-items    : center;
	justify-content: center;
	z-index        : 99999;
	opacity        : 0;
	pointer-events : none;
	transition     : opacity 0.35s ease;
}
#tw-camp-spinner.active {
	opacity        : 1;
	pointer-events : all;
}

/* ── Responsive: tablet ≤ 900px ────────────────────────────────────────────── */
@media (max-width: 900px) {
	.neoweaver-screen #tw-campaign-creator-wrapper {
		padding   : 28px 20px;
		margin-top: 40px;
		min-height: unset;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper h2 { font-size: 1.5rem; }
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--3,
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--4,
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--5 {
		grid-template-columns: repeat(2, 1fr);
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-visual {
		min-height    : 80px;
		flex-direction: row;
		justify-content: flex-start;
		text-align    : left;
		gap           : 16px;
		padding       : 16px;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-card-emoji {
		font-size    : 1.8rem;
		margin-bottom: 0;
		flex-shrink  : 0;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-dynamic-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row {
		grid-template-columns: 110px 1fr auto;
		gap                  : 10px;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-nav   { padding: 10px 22px; font-size: 0.85rem; }
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-deploy { padding: 12px 28px; }
}

/* ── Responsive: mobile ≤ 600px ────────────────────────────────────────────── */
@media (max-width: 600px) {
	.neoweaver-screen #tw-campaign-creator-wrapper {
		padding   : 20px 14px;
		margin-top: 20px;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper h2 {
		font-size    : 1.15rem;
		letter-spacing: 1px;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--2,
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--3,
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--4,
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--5,
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-option-grid--2.tw-option-grid--centered {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-nav-row {
		flex-direction: column-reverse;
		gap           : 12px;
		margin-top    : 28px;
		padding-top   : 20px;
		align-items   : stretch;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-nav {
		width     : 100%;
		padding   : 14px 20px;
		font-size : 0.9rem;
		text-align: center;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-btn-deploy { padding: 14px 20px; }
	/* Summary reflow */
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-row {
		grid-template-columns: 1fr auto;
		grid-template-rows   : auto auto;
		gap                  : 4px 10px;
		padding              : 12px 14px;
	}
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-key  { grid-column: 1; grid-row: 1; }
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-val  { grid-column: 1; grid-row: 2; white-space: normal; font-size: 0.82rem; }
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-summary-edit { grid-column: 2; grid-row: 1 / 3; align-self: center; }
	.neoweaver-screen #tw-campaign-creator-wrapper .tw-dynamic-grid {
		grid-template-columns: 1fr 1fr;
		max-height           : 320px;
	}
}
.tw-optional-badge {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #000;
	background: #adff00;
	padding: 2px 6px;
	vertical-align: middle;
	margin-left: 8px;
	clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

.tw-option-grid--2.tw-option-grid--centered {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	max-width: 480px;
	margin: 0 auto;
}

.tw-option-grid--5 {
	grid-template-columns: repeat(5, 1fr);
}

.tw-option-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.tw-binding-section {
	border-left: 2px solid #adff00;
	padding-left: 20px;
}

.tw-binding-label {
	font-size: .85rem;
	letter-spacing: 2px;
	margin-bottom: 16px;
	color: #adff00;
}
.tw-optional-badge {
			font-size:.6rem; font-weight:700; letter-spacing:1px;
			color:#000; background:#adff00; padding:2px 6px;
			vertical-align:middle; margin-left:8px;
			clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
		}
		/* Solo/Team: 2 equal cards, centred, capped width */
		.tw-option-grid--2.tw-option-grid--centered {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			max-width: 480px;
			margin: 0 auto;
		}
		.tw-option-grid--5 { grid-template-columns: repeat(5, 1fr); }
		.tw-option-grid--3 { grid-template-columns: repeat(3, 1fr); }
		.tw-binding-section { border-left:2px solid #adff00; padding-left:20px; }
		.tw-binding-label { font-size:.85rem; letter-spacing:2px; margin-bottom:16px; color:#adff00; }
.neoweaver-screen #tw-campaign-creator-wrapper a.tw-btn-deploy,
.neoweaver-screen #tw-campaign-creator-wrapper a.tw-btn-nav {
    color: #000 !important;
    text-decoration: none !important;
}
.tw-badge-free {
    font-size: 0.65em;
    background: oklch(0.75 0.25 115 / 0.2);  /* neon-green przytłumiony */
    color: #adff00;
    border: 1px solid #adff00;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    vertical-align: middle;
    margin-left: 4px;
}
.tw-agents-group-label {
    font-family: 'Chakra Petch', monospace;
    font-size: 0.75rem;
    color: var(--neon-green, #adff00);
    letter-spacing: 0.1em;
    margin: 16px 0 8px;
    grid-column: 1 / -1;
}
.tw-agents-group-label--free {
    color: var(--color-text-muted, #888);
}