:root { --neon: #adff00; --dark: #0a0a0a; --gray: #151515; }

			.tw-agents-empty {
				text-align: center;
				padding: 100px 0;
				font-family: 'Chakra Petch', sans-serif;
			}
			.tw-agents-empty-icon {
				font-size: 40px;
				margin-bottom: 20px;
				opacity: 0.3;
				line-height: 1;
			}
			.tw-agents-empty-main {
				font-size: 1rem;
				color: #adff00;
				margin: 0 0 10px;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}
			.tw-agents-empty-sub {
				display: block;
				font-size: 0.85rem;
				color: #fff;
				margin: 0 0 28px;
			}
			.tw-agents-empty-actions { display: flex; justify-content: center; }
			.tw-agents-empty-actions .tw-btn-sync {
				display: inline-block;
				background: #adff00;
				color: #000 !important;
				border: none;
				padding: 10px 22px;
				font-weight: 900;
				border-radius: 4px;
				cursor: pointer;
				text-transform: uppercase;
				font-family: 'Chakra Petch', sans-serif;
				font-size: 11px;
				letter-spacing: 0.05em;
				text-decoration: none;
				transition: background 0.2s, box-shadow 0.2s;
			}
			.tw-agents-empty-actions .tw-btn-sync:hover {
				background: #fff;
				box-shadow: 0 0 15px #adff00;
				color: #000 !important;
			}

			.tw-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
				gap: 20px;
				font-family: 'Chakra Petch', sans-serif;
			}
			.tw-card {
				background: var(--dark);
				border: 1px solid rgba(173,255,0,0.2);
				padding: 15px;
				color: white;
				position: relative;
				display: flex;
				flex-direction: column;
			}
			.tw-card-header { display: flex; gap: 12px; margin-bottom: 12px; }
			.tw-avatar { width: 64px; height: 64px; border: 1px solid var(--neon); object-fit: cover; }
			.tw-lvl-badge { background: var(--neon); color: black; padding: 2px 6px; font-weight: bold; font-size: 11px; margin-right: 5px; }
			.tw-campaign-info { font-size: 10px; text-transform: uppercase; color: var(--neon); opacity: 0.8; margin-top: 5px; border-top: 1px solid #222; padding-top: 5px; }

			/* ── MODAL ── */
			.tw-modal {
				display: none;
				position: fixed;
				z-index: 10000;
				inset: 0;
				align-items: center;
				justify-content: center;
				padding: 20px;
				box-sizing: border-box;
				overflow-y: auto; /* fallback dla bardzo małych ekranów */
			}
			.tw-modal.is-open {
				display: flex;
				background: rgba(0, 0, 0, 0.92);
			}
			.tw-modal-content {
				background: #050505;
				border: 1px solid var(--neon);
				width: 100%;
				max-width: 800px;
				/* calc odejmuje padding wrappera (2×20px) */
				max-height: calc(100vh - 40px);
				min-height: 0; /* wymagane: flex child musi móc się kurczyć */
				padding: 25px;
				color: white;
				position: relative;
				overflow-y: auto;
				box-sizing: border-box;
			}

			/* ── CLOSE BUTTON ── */
			.tw-close {
				position: sticky;
				top: 0;
				display: block;
				margin-left: auto; /* przesunięcie w prawo bez float */
				width: fit-content;
				color: var(--neon);
				cursor: pointer;
				font-size: 24px;
				z-index: 10;
				background: #050505;
				padding: 0 5px;
				line-height: 1.4;
				/* float: right usunięty — konflikt ze sticky */
			}

			.tw-btn { background: var(--gray); border: 1px solid var(--neon); color: var(--neon); padding: 8px; cursor: pointer; font-family: inherit; font-size: 11px; text-transform: uppercase; transition: 0.2s; }
			.tw-btn:hover { background: var(--neon); color: black; }
			.tw-btn-danger { border-color: #ff3b3b; color: #ff3b3b; }
			.tw-btn-danger:hover { background: #ff3b3b; color: #000; }
			.tw-tag-pill { font-size: 10px; padding: 2px 6px; border: 1px solid; margin: 2px; display: inline-block; }
			.tw-top-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #aaa; margin-bottom: 6px; }
			.tw-top-meta a { color: var(--neon); text-decoration: none; font-weight: 600; }
			.tw-toggle-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
			.tw-toggle-label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 32px; height: 16px; border-radius: 16px; background: #333; position: relative; outline: none; cursor: pointer; transition: 0.2s; border: 1px solid #555; }
			.tw-toggle-label input[type="checkbox"]::before { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #888; top: 1px; left: 1px; transition: 0.2s; }
			.tw-toggle-label input[type="checkbox"]:checked { background: var(--neon); border-color: var(--neon); }
			.tw-toggle-label input[type="checkbox"]:checked::before { background: #000; transform: translateX(14px); }
			.tw-card-actions { display: flex; gap: 8px; margin-top: auto; }
			.tw-card-actions .tw-btn { flex: 1 1 50%; }