/* Visual Branding options screen */
	/* ═══════════════════════════════════════════════════
   SETTINGS PAGE CHROME
═══════════════════════════════════════════════════ */
	.pj-admin-theme {
		padding: 20px;
	}

	.pj-section {
		background: #fff;
		border: 1px solid #e8e4ef;
		border-radius: 12px;
		padding: 22px;
		margin-bottom: 16px;
	}

	.pj-section--compact {
		padding: 14px;
	}

	.pj-section-title--tight {
		margin-bottom: 2px;
	}

	.pj-visual-help {
		background: linear-gradient(135deg, #1D1D2D, #353543);
		border-radius: 10px;
		padding: 14px 18px;
		margin-bottom: 16px;
		color: #fff;
		display: flex;
		gap: 14px;
		align-items: flex-start;
	}

	.pj-visual-help-icon {
		font-size: 22px;
		flex-shrink: 0;
	}

	.pj-visual-help-title {
		font-size: 13px;
		font-weight: 700;
		margin-bottom: 4px;
	}

	.pj-visual-help-text {
		font-size: 11px;
		opacity: .8;
		line-height: 1.6;
	}

	.pj-visual-inline-code {
		background: rgba(255, 255, 255, .15);
		padding: 1px 4px;
		border-radius: 3px;
	}

	.pj-visual-density-list,
	.pj-visual-save-row,
	.pv-form-actions,
	.pv-legend {
		display: flex;
		flex-wrap: wrap;
	}

	.pj-visual-density-list {
		gap: 8px;
		margin-bottom: 8px;
	}

	.pj-density-note {
		font-size: 9px;
		color: #999;
	}

	.pj-visual-save-row {
		align-items: center;
		gap: 16px;
	}

	.pj-visual-save-note,
	.pj-visual-preview-note {
		font-size: 11px;
		color: #888;
	}

	.pj-visual-preview-note {
		margin: 0 0 10px;
	}

	.pv-form-actions {
		gap: 5px;
		margin-top: 4px;
	}

	.pv-legend {
		margin-top: 8px;
		gap: 6px;
		font-size: 9px;
		color: #888;
	}

	.pv-legend span {
		background: #f3f3f3;
		padding: 2px 6px;
		border-radius: 3px;
	}

	.pj-section-title {
		font-size: 13px;
		font-weight: 700;
		color: #1a1a2e;
		margin: 0 0 4px;
		text-transform: uppercase;
		letter-spacing: 0.6px;
		display: flex;
		align-items: center;
		gap: 7px;
	}

	.pj-section-desc {
		font-size: 12px;
		color: #777;
		margin: 0 0 16px;
		line-height: 1.5;
	}

	.pj-group-header {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		background: #f8f7fd;
		border: 1px solid #ede9f6;
		border-radius: 8px;
		padding: 10px 14px;
		margin: 14px 0 10px;
	}

	.pj-group-header:first-child {
		margin-top: 0;
	}

	.pj-group-header--content {
		background: #F7F7F6;
		border-color: #D1D1D0;
	}

	.pj-group-header--accent {
		background: #fff7f0;
		border-color: #ffd5b3;
	}

	.pj-group-header--status {
		background: #f0fdf4;
		border-color: #bbf7d0;
	}

	.pj-group-header--table {
		background: #f0f4ff;
		border-color: #c7d7f5;
	}

	.pj-group-header--typography {
		background: #fafaf9;
		border-color: #e0dfe8;
	}

	.pj-group-header--topbar {
		background: #f0f8ff;
		border-color: #b3d4f0;
	}

	.pj-group-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		flex-shrink: 0;
		margin-top: 1px;
	}

	.pj-group-icon--sidebar {
		background: #1D1D2D;
		color: #F9761B;
	}

	.pj-group-icon--content {
		background: #FEFEFE;
		color: #374151;
		border: 1px solid #D1D1D0;
	}

	.pj-group-icon--accent {
		background: #F9761B;
		color: #fff;
	}

	.pj-group-icon--status {
		background: #059669;
		color: #fff;
	}

	.pj-group-icon--table {
		background: #374151;
		color: #fff;
	}

	.pj-group-icon--typography {
		background: #111827;
		color: #fff;
	}

	.pj-group-icon--topbar {
		background: #F8F9FA;
		color: #374151;
		border: 1px solid #d1d5db;
	}

	.pj-group-info {
		flex: 1;
	}

	.pj-group-name {
		font-size: 12px;
		font-weight: 700;
		color: #1a1a2e;
		margin-bottom: 2px;
	}

	.pj-group-note {
		font-size: 11px;
		color: #777;
		line-height: 1.4;
	}

	/* ─── Palettes ───────────────────────────────────── */
	.pj-admin-palettes {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 8px;
	}

	.pj-admin-palette {
		border: 2px solid #e8e4ef;
		border-radius: 10px;
		padding: 9px 11px;
		cursor: pointer;
		transition: all 0.2s;
		background: #fff;
		position: relative;
	}

	.pj-admin-palette:hover {
		border-color: #bbb;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
	}

	.pj-admin-palette.active {
		border-color: var(--admin-primary, #374151);
		box-shadow: 0 0 0 3px rgba(55, 65, 81, .15);
	}

	.pj-admin-palette.active::after {
		content: "\f00c";
		color: var(--admin-primary, #374151);
		display: block;
		font-family: FontAwesome;
		font-size: 10px;
		position: absolute;
		right: 7px;
		top: 5px;
	}

	.pj-palette-name {
		font-size: 10px;
		font-weight: 700;
		color: #333;
		margin-bottom: 5px;
	}

	.pj-palette-swatches {
		display: grid;
		grid-template-columns: repeat(auto-fill, 12px);
		gap: 4px;
		align-items: center;
	}

	.pj-palette-swatch {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 2px solid rgba(0, 0, 0, .07);
		box-sizing: border-box;
	}

	.pj-palette-swatch--light {
		border-color: rgba(0, 0, 0, .18);
	}

	.pj-admin-palette--custom {
		grid-column: 1/-1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-style: dashed;
		border-color: var(--admin-primary-light, #d6c8ed);
		background: var(--admin-card-bg, #faf9fd);
		padding: 12px;
		text-align: center;
		min-height: 54px;
	}

	.pj-admin-palette--custom:hover {
		border-color: var(--admin-primary, #374151);
		transform: none;
	}

	.pj-admin-palette--custom .pj-palette-name {
		color: var(--admin-primary, #374151);
		font-size: 11px;
		margin: 0;
	}

	.pj-palette-custom-hint {
		font-size: 10px;
		color: #888;
		margin-top: 2px;
	}

	@media(max-width:1100px) {
		.pj-admin-palettes {
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		}
	}

	@media(max-width:700px) {
		.pj-admin-palettes {
			grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		}
	}

	/* ─── Color rows ─────────────────────────────────── */
	.pj-color-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	.pj-color-row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 10px;
	}

	.pj-color-label-wrap {
		flex: 1;
		min-width: 0;
	}

	.pj-color-label {
		font-size: 12px;
		font-weight: 600;
		color: #333;
		display: block;
	}

	.pj-color-sublabel {
		font-size: 10px;
		color: #999;
		display: block;
		margin-top: 1px;
	}

	.pj-color-input {
		width: 36px;
		height: 36px;
		border: 2px solid #e8e4ef;
		border-radius: 7px;
		padding: 2px;
		cursor: pointer;
		background: #fff;
		flex-shrink: 0;
	}

	.pj-color-input::-webkit-color-swatch-wrapper {
		padding: 0;
	}

	.pj-color-input::-webkit-color-swatch {
		border: none;
		border-radius: 3px;
	}

	.pj-color-hex {
		width: 82px;
		height: 32px;
		border: 1px solid #e8e4ef;
		border-radius: 6px;
		padding: 0 7px;
		font-family: monospace;
		font-size: 11px;
		color: #333;
		text-transform: uppercase;
		flex-shrink: 0;
	}

	@media(max-width:900px) {
		.pj-color-grid {
			grid-template-columns: 1fr;
		}
	}

	/* ═══════════════════════════════════════════════════
   TWO-COLUMN STICKY LAYOUT
   Left column scrolls; right preview stays fixed
═══════════════════════════════════════════════════ */
	@media (min-width: 992px) {
		.pj-admin-theme>.row {
			display: flex;
			align-items: flex-start;
			flex-wrap: nowrap;
		}

		.pj-admin-theme>.row>.col-lg-7 {
			overflow-y: auto;
			max-height: calc(100vh - -160px);
			padding-right: 8px;
			scrollbar-width: thin;
			scrollbar-color: #d4d0de transparent;
		}

		.pj-admin-theme>.row>.col-lg-7::-webkit-scrollbar {
			width: 5px;
		}

		.pj-admin-theme>.row>.col-lg-7::-webkit-scrollbar-track {
			background: transparent;
		}

		.pj-admin-theme>.row>.col-lg-7::-webkit-scrollbar-thumb {
			background: #d4d0de;
			border-radius: 3px;
		}

		.pj-admin-theme>.row>.col-lg-5 {
			flex-shrink: 0;
		}
	}

	/* ─── Density ────────────────────────────────────── */
	.pj-density-option {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 10px 8px;
		border: 2px solid #e8e4ef;
		border-radius: 10px;
		cursor: pointer;
		transition: all 0.2s;
		text-align: center;
	}

	.pj-density-option:hover {
		border-color: #bbb;
	}

	.pj-density-option.active {
		border-color: var(--admin-primary-safe, #374151);
		background: var(--admin-card-bg, rgba(55, 65, 81, .04));
		box-shadow: 0 0 0 3px var(--admin-primary-lighter, rgba(55, 65, 81, .1));
	}

	.pj-density-option i.fa {
		font-size: 14px;
		color: #888;
	}

	.pj-density-option.active i.fa {
		color: var(--admin-primary-safe, #374151);
	}

	.pj-density-label {
		font-size: 11px;
		font-weight: 600;
		color: #555;
	}

	.pj-density-option.active .pj-density-label {
		color: var(--admin-primary-safe, #374151);
	}

	/* ─── Save / contrast ────────────────────────────── */
	.pj-admin-btn-save {
		padding: 10px 32px;
		border: none;
		border-radius: 8px;
		background: var(--admin-primary-safe, #374151);
		color: var(--admin-on-primary, #fff);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s;
	}

	.pj-admin-btn-save:hover {
		opacity: .9;
	}

	.pj-admin-btn-save .fa {
		color: inherit !important;
	}

	.pj-admin-btn-save:disabled {
		opacity: .6;
		cursor: not-allowed;
	}

	.pj-admin-save-msg {
		display: none;
		margin-left: 12px;
		font-size: 13px;
		color: #0f9d58;
	}

	.pj-contrast-hint {
		margin-top: 10px;
		padding: 10px 14px;
		background: #f8f7fd;
		border-left: 3px solid var(--admin-primary, #374151);
		border-radius: 6px;
		font-size: 11px;
		line-height: 1.6;
		color: #444;
	}

	.pj-contrast-hint .fa {
		color: var(--admin-primary, #374151);
		margin-right: 4px;
	}

	/* ─── Branding ───────────────────────────────────── */
	.pj-branding-grid {
		display: grid;
		grid-template-columns: 170px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
	}

	.pj-branding-preview {
		min-height: 110px;
		padding: 14px 12px;
		border-radius: 8px;
		background: var(--admin-sidebar, #1D1D2D);
		color: var(--admin-sidebar-text, #fff);
		text-align: center;
	}

	.pj-branding-preview img {
		display: block;
		max-width: 130px;
		max-height: 54px;
		width: auto;
		height: auto;
		object-fit: contain;
		margin: 0 auto 8px;
	}

	.pj-branding-preview strong {
		display: block;
		font-size: 13px;
	}

	.pj-branding-preview span {
		display: block;
		font-size: 11px;
		opacity: .7;
	}

	.pj-branding-note {
		font-size: 11px;
		color: #888;
		line-height: 1.5;
		margin: 5px 0 0;
	}

	@media(max-width:700px) {
		.pj-branding-grid {
			grid-template-columns: 1fr;
		}
	}

	/* ═══════════════════════════════════════════════════
   LIVE PREVIEW — all colors from --pv-* scoped vars
═══════════════════════════════════════════════════ */
	#pjPreviewWrapper {
		border: 1px solid #e0dfe8;
		border-radius: 10px;
		overflow: hidden;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	}

	/* ── Sidebar ───────────────────────────────────── */
	.pv-layout {
		display: flex;
		min-height: 520px;
	}

	.pv-sidebar {
		width: 130px;
		flex-shrink: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		background: var(--pv-sidebar);
		overflow: hidden;
	}

	.pv-sidebar-header {
		padding: 12px 10px 10px;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
		margin-bottom: 4px;
	}

	.pv-brand-logo {
		display: inline-block;
		width: 22px;
		height: 22px;
		border-radius: 5px;
		background: var(--pv-accent);
		margin-bottom: 6px;
	}

	.pv-brand-name {
		font-size: 11px;
		font-weight: 700;
		color: var(--pv-sidebar-text);
		display: block;
	}

	.pv-brand-sub {
		font-size: 9px;
		color: var(--pv-sidebar-muted);
		display: block;
		margin-top: 1px;
	}

	.pv-menu-label {
		font-size: 8px;
		font-weight: 700;
		letter-spacing: .8px;
		text-transform: uppercase;
		color: var(--pv-sidebar-muted);
		padding: 8px 10px 4px;
		display: block;
	}

	.pv-menu-item {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		font-size: 10px;
		font-weight: 500;
		color: var(--pv-sidebar-text);
		cursor: default;
	}

	.pv-menu-item .fa {
		font-size: 9px;
		width: 12px;
		text-align: center;
	}

	.pv-menu-item.pv-hover {
		background: var(--pv-sidebar-secondary);
	}

	.pv-menu-item.pv-active {
		background: var(--pv-sidebar-active);
		border-left: 3px solid var(--pv-accent);
		font-weight: 700;
	}

	.pv-menu-item.pv-muted {
		color: var(--pv-sidebar-muted);
	}

	.pv-submenu {
		background: var(--pv-sidebar-secondary);
	}

	.pv-submenu .pv-menu-item {
		padding-left: 22px;
		font-size: 9px;
	}

	.pv-sidebar-footer {
		margin-top: auto;
		padding: 8px 10px;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}

	.pv-sidebar-footer-text {
		font-size: 9px;
		color: var(--pv-sidebar-muted);
	}

	/* ── Main content ──────────────────────────────── */
	.pv-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: var(--pv-main-bg);
		overflow: hidden;
	}

	/* Top bar */
	.pv-topbar {
		background: var(--pv-card-bg);
		border-bottom: 1px solid var(--pv-table-border);
		padding: 8px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pv-topbar-title {
		font-size: 12px;
		font-weight: 700;
		color: var(--pv-primary);
	}

	.pv-breadcrumb {
		font-size: 9px;
		color: var(--pv-sidebar-muted);
	}

	.pv-topbar-actions {
		display: flex;
		gap: 5px;
		align-items: center;
	}

	.pv-topbar-avatar {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--pv-primary);
		color: #fff;
		font-size: 8px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Page heading strip */
	.pv-page-heading {
		background: var(--pv-card-bg);
		border-bottom: 1px solid var(--pv-table-border);
		padding: 8px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pv-page-title {
		font-size: 11px;
		font-weight: 700;
		color: var(--pv-main-text);
	}

	.pv-page-subtitle {
		font-size: 9px;
		color: var(--pv-sidebar-muted);
		margin-top: 1px;
	}

	/* Scrollable content body */
	.pv-body {
		padding: 10px 12px;
		flex: 1;
		overflow: hidden;
	}

	/* Stat cards */
	.pv-stats {
		display: flex;
		gap: 6px;
		margin-bottom: 10px;
	}

	.pv-stat {
		flex: 1;
		background: var(--pv-card-bg);
		border: 1px solid var(--pv-table-border);
		border-radius: 7px;
		padding: 8px 10px;
	}

	.pv-stat-val {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 1px;
	}

	.pv-stat-lbl {
		font-size: 8px;
		color: var(--pv-sidebar-muted);
	}

	/* Buttons row */
	.pv-btns {
		display: flex;
		gap: 5px;
		margin-bottom: 10px;
		flex-wrap: wrap;
		align-items: center;
	}

	.pv-btn {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 5px;
		font-size: 9px;
		font-weight: 600;
		cursor: default;
		border: 1px solid transparent;
	}

	.pv-btn .fa {
		color: inherit !important;
	}

	.pv-btn-primary .fa,
	.pv-btn-accent .fa,
	.pv-btn-danger .fa,
	.pv-btn-success .fa {
		color: #fff !important;
	}

	.pv-btn-primary {
		background: var(--pv-primary);
		color: #fff;
	}

	.pv-btn-accent {
		background: var(--pv-accent);
		color: #fff;
	}

	.pv-btn-outline {
		background: transparent;
		color: var(--pv-primary);
		border-color: var(--pv-primary);
	}

	.pv-btn-danger {
		background: var(--pv-danger);
		color: #fff;
	}

	.pv-btn-success {
		background: var(--pv-success);
		color: #fff;
	}

	.pv-btn-link {
		background: transparent;
		color: var(--pv-link);
		font-size: 9px;
		text-decoration: underline;
		padding: 0;
		border: none;
	}

	/* Badges row */
	.pv-badges {
		display: flex;
		gap: 4px;
		margin-bottom: 10px;
		flex-wrap: wrap;
	}

	.pv-badge {
		display: inline-block;
		padding: 2px 7px;
		border-radius: 4px;
		font-size: 8px;
		font-weight: 600;
		border: 1px solid transparent;
	}

	/* Inline hex helper via CSS — badge colours use alpha tints of the status vars */
	.pv-badge-success {
		background: color-mix(in srgb, var(--pv-success) 18%, transparent);
		color: var(--pv-success);
		border-color: color-mix(in srgb, var(--pv-success) 30%, transparent);
	}

	.pv-badge-warning {
		background: color-mix(in srgb, var(--pv-warning) 18%, transparent);
		color: var(--pv-warning);
		border-color: color-mix(in srgb, var(--pv-warning) 30%, transparent);
	}

	.pv-badge-danger {
		background: color-mix(in srgb, var(--pv-danger) 18%, transparent);
		color: var(--pv-danger);
		border-color: color-mix(in srgb, var(--pv-danger) 30%, transparent);
	}

	.pv-badge-info {
		background: color-mix(in srgb, var(--pv-info) 18%, transparent);
		color: var(--pv-info);
		border-color: color-mix(in srgb, var(--pv-info) 30%, transparent);
	}

	.pv-badge-secondary {
		background: color-mix(in srgb, var(--pv-secondary) 18%, transparent);
		color: var(--pv-secondary);
		border-color: color-mix(in srgb, var(--pv-secondary) 30%, transparent);
	}

	/* Table */
	.pv-table-wrap {
		background: var(--pv-card-bg);
		border: 1px solid var(--pv-table-border);
		border-radius: 7px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.pv-table {
		width: 100%;
		border-collapse: collapse;
	}

	.pv-table th {
		background: var(--pv-primary);
		color: #fff;
		padding: 5px 8px;
		font-size: 9px;
		font-weight: 700;
		text-align: left;
	}

	.pv-table td {
		padding: 5px 8px;
		font-size: 9px;
		color: var(--pv-main-text);
		background: var(--pv-card-bg);
		border-top: 1px solid var(--pv-table-border);
	}

	.pv-table tr:first-child td {
		border-top: none;
	}

	.pv-table tr:hover td {
		background: color-mix(in srgb, var(--pv-main-bg) 60%, var(--pv-card-bg));
	}

	.pv-table-link {
		color: var(--pv-primary);
		font-weight: 600;
	}

	.pv-table-actions {
		display: flex;
		gap: 3px;
		justify-content: flex-end;
	}

	#pjPreviewWrapper .pv-table thead th {

		background: var(--pv-table-header-bg);

		color: var(--pv-table-header-text);
	}

	#pjPreviewWrapper .pv-table tbody td {

		background: var(--pv-table-row-bg);

		color: var(--pv-table-text);
	}

	#pjPreviewWrapper .pv-table tbody tr:nth-child(even) td {

		background: var(--pv-table-row-alt-bg);
	}

	#pjPreviewWrapper .pv-table tbody tr:hover td {

		background: var(--pv-table-row-hover);
	}

	.pv-tbl-btn {
		width: 18px;
		height: 18px;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 8px;
		cursor: default;
	}

	.pv-tbl-btn-edit {
		background: color-mix(in srgb, var(--pv-primary) 12%, transparent);
		color: var(--pv-primary);
		border: 1px solid color-mix(in srgb, var(--pv-primary) 25%, transparent);
	}

	.pv-tbl-btn-del {
		background: color-mix(in srgb, var(--pv-danger) 12%, transparent);
		color: var(--pv-danger);
		border: 1px solid color-mix(in srgb, var(--pv-danger) 25%, transparent);
	}

	/* Pagination */
	.pv-pagination {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 0 8px 6px;
		justify-content: flex-end;
	}

	.pv-pager {
		padding: 2px 7px;
		border-radius: 4px;
		font-size: 8px;
		font-weight: 600;
		background: var(--pv-card-bg);
		border: 1px solid var(--pv-table-border);
		color: var(--pv-main-text);
		cursor: default;
	}

	.pv-pager.active {
		background: var(--pv-primary);
		border-color: var(--pv-primary);
		color: #fff;
	}

	/* Form */
	.pv-form-section {
		background: var(--pv-card-bg);
		border: 1px solid var(--pv-table-border);
		border-radius: 7px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.pv-form-title {
		font-size: 10px;
		font-weight: 700;
		color: var(--pv-main-text);
		margin-bottom: 8px;
		border-bottom: 1px solid var(--pv-table-border);
		padding-bottom: 5px;
	}

	.pv-form-row {
		display: flex;
		gap: 6px;
		margin-bottom: 6px;
	}

	.pv-form-group {
		flex: 1;
	}

	.pv-label {
		font-size: 8px;
		font-weight: 600;
		color: var(--pv-main-text);
		display: block;
		margin-bottom: 2px;
	}

	.pv-input {
		width: 100%;
		height: 22px;
		border: 1px solid var(--pv-input-border);
		border-radius: 4px;
		background: var(--pv-card-bg);
		font-size: 8px;
		padding: 0 5px;
		color: var(--pv-main-text);
		box-sizing: border-box;
	}

	.pv-input:focus {
		border-color: var(--pv-primary);
		outline: none;
	}

	.pv-select {
		width: 100%;
		height: 22px;
		border: 1px solid var(--pv-input-border);
		border-radius: 4px;
		background: var(--pv-card-bg);
		font-size: 8px;
		padding: 0 4px;
		color: var(--pv-main-text);
		box-sizing: border-box;
	}

	/* Alerts */
	.pv-alerts {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-bottom: 10px;
	}

	.pv-alert {
		padding: 5px 8px;
		border-radius: 5px;
		font-size: 9px;
		border-left: 3px solid;
	}

	.pv-alert-success {
		background: color-mix(in srgb, var(--pv-success) 12%, transparent);
		color: var(--pv-success);
		border-left-color: var(--pv-success);
	}

	.pv-alert-warning {
		background: color-mix(in srgb, var(--pv-warning) 12%, transparent);
		color: var(--pv-warning);
		border-left-color: var(--pv-warning);
	}

	.pv-alert-info {
		background: color-mix(in srgb, var(--pv-info) 12%, transparent);
		color: var(--pv-info);
		border-left-color: var(--pv-info);
	}

	/* Label tooltips */
	.pj-color-row .pj-tip {
		display: inline-block;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #e8e4ef;
		color: #777;
		font-size: 9px;
		font-weight: 700;
		text-align: center;
		line-height: 14px;
		cursor: help;
		flex-shrink: 0;
	}

	/* ── Preview: independent component colors ── */
	/* Table: fully independent header, rows, text */
	#pjPreviewWrapper .pv-table th {
		background: var(--pv-table-header-bg) !important;
		color: var(--pv-table-header-text, #fff) !important;
	}

	#pjPreviewWrapper .pv-table td {
		background: var(--pv-table-row-bg) !important;
		color: var(--pv-table-text) !important;
		border-color: var(--pv-table-border) !important;
	}

	#pjPreviewWrapper .pv-table tr:nth-child(even) td {
		background: var(--pv-table-row-alt) !important;
	}

	#pjPreviewWrapper .pv-table tr:hover td {
		background: var(--pv-table-row-hover) !important;
	}

	/* Typography */
	#pjPreviewWrapper .pv-topbar-title {
		color: var(--pv-heading-text) !important;
	}

	#pjPreviewWrapper .pv-breadcrumb {
		color: var(--pv-muted-text) !important;
	}

	#pjPreviewWrapper .pv-stat-lbl {
		color: var(--pv-muted-text) !important;
	}

	#pjPreviewWrapper .pv-label {
		color: var(--pv-heading-text) !important;
	}

	#pjPreviewWrapper .pv-table-link {
		color: var(--pv-link-text) !important;
	}

	#pjPreviewWrapper .pv-form-title {
		color: var(--pv-heading-text) !important;
	}

	/* Icons */
	#pjPreviewWrapper .pv-menu-item .fa {
		color: var(--pv-sidebar-icon) !important;
	}

	#pjPreviewWrapper .pv-content-icon {
		color: var(--pv-icon-color) !important;
	}

	/* Topbar */
	#pjPreviewWrapper .pv-topbar {
		background: var(--pv-topbar-bg) !important;
		border-bottom-color: var(--pv-card-border) !important;
	}

	#pjPreviewWrapper .pv-topbar-text,
	#pjPreviewWrapper .pv-topbar a,
	#pjPreviewWrapper .pv-topbar i.fa {
		color: var(--pv-topbar-text) !important;
	}

	#pjPreviewWrapper .pv-btn-primary i.fa,
	#pjPreviewWrapper .pv-btn-accent i.fa,
	#pjPreviewWrapper .pv-btn-danger i.fa,
	#pjPreviewWrapper .pv-btn-success i.fa {
		color: #fff !important;
	}

	/* Form inputs */
	#pjPreviewWrapper .pv-input {
		background: var(--pv-input-bg) !important;
		color: var(--pv-input-text) !important;
		border-color: var(--pv-input-border) !important;
	}

	/* Card / ibox borders */
	#pjPreviewWrapper .pv-card,
	#pjPreviewWrapper .pv-ibox {
		border-color: var(--pv-card-border) !important;
	}
