:root {
	color-scheme: dark;
	font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	background: #09090b;
	color: #fafafa;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(circle at 20% 10%, rgba(124, 58, 237, .22), transparent 32rem),
		#09090b;
}

a {
	color: #c4b5fd;
}

.shell {
	width: min(1120px, calc(100% - 2rem));
	margin: 0 auto;
}

.auth-shell {
	display: grid;
	min-height: 100vh;
	place-items: center;
	padding: 2rem 0;
}

.card {
	width: min(440px, 100%);
	padding: 2rem;
	border: 1px solid #27272a;
	border-radius: 1rem;
	background: rgba(24, 24, 27, .92);
	box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.brand-logo {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.brand-logo--primary {
	width: min(280px, 82%);
	margin: 0 0 1.5rem;
}

.brand-logo--header {
	width: clamp(145px, 18vw, 210px);
}

.brand-logo--studio-header {
	width: clamp(150px, 19vw, 220px);
}

.eyebrow {
	margin: 0 0 .5rem;
	color: #a78bfa;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

h1 {
	margin: 0 0 .5rem;
	font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.muted {
	color: #a1a1aa;
}

.field {
	display: grid;
	gap: .45rem;
	margin-top: 1.25rem;
}

label {
	font-size: .9rem;
	font-weight: 650;
}

input {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid #3f3f46;
	border-radius: .65rem;
	background: #18181b;
	color: #fafafa;
	font: inherit;
}

input:focus {
	border-color: #8b5cf6;
	outline: 3px solid rgba(139, 92, 246, .18);
}

button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: .75rem 1rem;
	border: 0;
	border-radius: .65rem;
	background: #7c3aed;
	color: white;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
}

button:hover,
.button:hover {
	background: #6d28d9;
}

.submit {
	width: 100%;
	margin-top: 1.5rem;
}

.error {
	margin-top: 1rem;
	padding: .8rem .9rem;
	border: 1px solid #7f1d1d;
	border-radius: .65rem;
	background: rgba(127, 29, 29, .24);
	color: #fecaca;
}

.success {
	margin-top: 1rem;
	padding: .8rem .9rem;
	border: 1px solid #166534;
	border-radius: .65rem;
	background: rgba(22, 101, 52, .24);
	color: #bbf7d0;
}

.warning {
	margin-top: 1rem;
	padding: .8rem .9rem;
	border: 1px solid #854d0e;
	border-radius: .65rem;
	background: rgba(133, 77, 14, .24);
	color: #fde68a;
}

.info {
	margin-top: 1rem;
	padding: .8rem .9rem;
	border: 1px solid #1e3a5f;
	border-radius: .65rem;
	background: rgba(30, 58, 95, .28);
	color: #bfdbfe;
}

.form-link {
	margin: 1rem 0 0;
	text-align: center;
}

.auth-progress {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: 0 0 1.15rem;
	padding: 0;
	list-style: none;
	color: #71717a;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.auth-progress li {
	position: relative;
}

.auth-progress li + li::before {
	content: '·';
	margin-right: .55rem;
	color: #52525b;
}

.auth-progress .is-on,
.auth-progress .is-done {
	color: #c4b5fd;
}

.auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .4rem;
	margin: 1.15rem 0 0;
	padding: .3rem;
	border: 1px solid #27272a;
	border-radius: .8rem;
	background: #111113;
}

.auth-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4rem;
	border-radius: .55rem;
	color: #a1a1aa;
	font-weight: 700;
	text-decoration: none;
}

.auth-tab.is-on {
	background: #27272a;
	color: #fafafa;
}

.otp-input {
	min-height: 3.4rem;
	padding: .7rem .4rem;
	font-size: 1.7rem;
	font-variant-numeric: tabular-nums;
	font-weight: 750;
	letter-spacing: .42em;
	text-align: center;
}

.auth-hint {
	margin: .7rem 0 0;
	font-size: .86rem;
}

.auth-optional {
	color: #71717a;
	font-weight: 600;
}

.auth-resend {
	margin-top: .85rem;
}

.button--ghost,
button.button--ghost {
	width: 100%;
	border: 1px solid #3f3f46;
	background: transparent;
	color: #e4e4e7;
}

.button--ghost:hover,
button.button--ghost:hover {
	background: #18181b;
}

/* Registrierung ------------------------------------------------------ */
.auth-page {
	background:
		radial-gradient(circle at 16% 12%, rgba(124, 58, 237, .25), transparent 30rem),
		radial-gradient(circle at 88% 88%, rgba(79, 70, 229, .16), transparent 34rem),
		#09090b;
}

.auth-shell--wide {
	width: min(1120px, calc(100% - 2rem));
}

.auth-card--wide {
	width: min(1040px, 100%);
	padding: clamp(1.35rem, 3vw, 2.5rem);
}

.auth-card--wide > h1,
.auth-card--wide > h1 + .muted {
	max-width: 46rem;
}

.plan-picker {
	min-width: 0;
	margin: 1.6rem 0 0;
	padding: 0;
	border: 0;
}

.plan-picker legend {
	margin-bottom: .75rem;
	font-size: .82rem;
	font-weight: 750;
}

.plan-picker__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .7rem;
}

.plan-choice {
	position: relative;
	display: grid;
	align-content: start;
	gap: .55rem;
	min-height: 13.4rem;
	padding: 1.05rem;
	overflow: hidden;
	border: 1px solid #35353c;
	border-radius: .85rem;
	background: linear-gradient(150deg, rgba(31, 31, 37, .94), rgba(15, 15, 19, .96));
	cursor: pointer;
	transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.plan-choice:hover {
	border-color: #6d5fa4;
	transform: translateY(-2px);
}

.plan-choice:has(input:checked) {
	border-color: #8b5cf6;
	background: linear-gradient(150deg, rgba(91, 33, 182, .3), rgba(24, 24, 32, .98));
	box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .17), 0 14px 34px rgba(0, 0, 0, .2);
}

.plan-choice:has(input:focus-visible) {
	outline: 3px solid rgba(139, 92, 246, .3);
	outline-offset: 2px;
}

.plan-choice > input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.plan-choice__check {
	position: absolute;
	top: .8rem;
	right: .8rem;
	width: 1.1rem;
	height: 1.1rem;
	border: 1px solid #52525b;
	border-radius: 50%;
}

.plan-choice:has(input:checked) .plan-choice__check {
	border: 4px solid #a78bfa;
	background: #fff;
}

.plan-choice__badge {
	position: absolute;
	top: 0;
	left: 0;
	padding: .25rem .55rem;
	border-radius: 0 0 .55rem 0;
	background: #7c3aed;
	color: #fff;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.plan-choice.is-recommended {
	padding-top: 1.65rem;
}

.plan-choice strong {
	padding-right: 1.4rem;
	font-size: .98rem;
}

.plan-choice__price {
	display: flex;
	align-items: baseline;
	gap: .25rem;
	font-size: 1.65rem;
	font-weight: 820;
	letter-spacing: -.04em;
}

.plan-choice__price small {
	color: #8d8d98;
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: 0;
}

.plan-choice__facts {
	display: grid;
	gap: .35rem;
	margin-top: auto;
	padding-top: .65rem;
	border-top: 1px solid rgba(113, 113, 122, .22);
	color: #b5b5bf;
	font-size: .72rem;
	font-weight: 600;
}

.plan-choice__facts span::before {
	margin-right: .35rem;
	color: #a78bfa;
	content: '✓';
}

.registration-email {
	display: grid;
	grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1.2fr);
	align-items: center;
	gap: 1.25rem;
	margin-top: 1.2rem;
	padding: 1rem 1.1rem;
	border: 1px solid #323238;
	border-radius: .85rem;
	background: rgba(9, 9, 11, .45);
}

.registration-email .auth-hint {
	margin-top: .25rem;
}

.registration-email input {
	min-height: 3.2rem;
}

.registration-submit {
	display: flex;
	gap: .6rem;
	width: min(23rem, 100%);
	margin: 1.25rem auto 0;
}

.auth-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .65rem 1.4rem;
	margin-top: .95rem;
	color: #9d9da7;
	font-size: .74rem;
	font-weight: 650;
}

.auth-trust span::first-letter {
	color: #34d399;
}

.auth-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.profile-layout {
	display: grid;
	grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.55fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.selected-plan {
	align-self: start;
	padding: 1.25rem;
	border: 1px solid rgba(139, 92, 246, .35);
	border-radius: .9rem;
	background: linear-gradient(155deg, rgba(91, 33, 182, .22), rgba(17, 17, 22, .96));
}

.selected-plan__eyebrow {
	color: #a78bfa;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.selected-plan h2 {
	margin: .4rem 0 .2rem;
	font-size: 1.25rem;
}

.selected-plan__price {
	margin: .25rem 0 1rem;
	font-size: 2rem;
	font-weight: 820;
	letter-spacing: -.04em;
}

.selected-plan__price small {
	color: #9696a1;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: 0;
}

.selected-plan ul {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid rgba(167, 139, 250, .18);
	border-bottom: 1px solid rgba(167, 139, 250, .18);
	list-style: none;
	color: #d1d1d8;
	font-size: .78rem;
}

.selected-plan li::before {
	margin-right: .45rem;
	color: #a78bfa;
	content: '✓';
}

.selected-plan > p:not(.selected-plan__price) {
	margin: 1rem 0;
	color: #9c9ca8;
	font-size: .73rem;
	line-height: 1.55;
}

.selected-plan > a {
	font-size: .76rem;
	font-weight: 700;
}

.profile-form {
	min-width: 0;
}

.verified-email {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .2rem;
	padding: .42rem .65rem;
	border: 1px solid rgba(52, 211, 153, .27);
	border-radius: 999px;
	background: rgba(16, 185, 129, .08);
	color: #a7f3d0;
	font-size: .72rem;
	font-weight: 650;
}

.field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
}

.password-field {
	position: relative;
}

.password-field input {
	padding-right: 5.5rem;
}

.password-toggle,
button.password-toggle {
	position: absolute;
	top: .35rem;
	right: .35rem;
	min-height: 2.1rem;
	padding: .35rem .55rem;
	background: #29292f;
	color: #d4d4d8;
	font-size: .7rem;
}

.legal-check {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: .7rem;
	margin-top: 1.25rem;
	padding: .85rem;
	border: 1px solid #34343b;
	border-radius: .7rem;
	background: rgba(9, 9, 11, .42);
	color: #b8b8c0;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.5;
}

.legal-check input {
	width: 1rem;
	height: 1rem;
	margin: .12rem 0 0;
	accent-color: #7c3aed;
}

@media (max-width: 900px) {
	.plan-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.plan-choice { min-height: 11.5rem; }
	.profile-layout { grid-template-columns: 1fr; }
	.selected-plan { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; }
	.selected-plan ul,.selected-plan > p:not(.selected-plan__price),.selected-plan > a { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
	.auth-shell { padding: 1rem 0; }
	.auth-card--wide { padding: 1.2rem; }
	.plan-picker__grid,.registration-email,.field-row { grid-template-columns: 1fr; }
	.plan-choice { min-height: 10.5rem; }
	.registration-email { gap: .75rem; }
	.auth-trust { align-items: flex-start; flex-direction: column; }
	.selected-plan { display: block; }
}

.app-header {
	border-bottom: 1px solid #27272a;
	background: rgba(9, 9, 11, .86);
}

.app-header .shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 4.5rem;
}

.brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: #fafafa;
	font-size: 1.1rem;
	font-weight: 800;
	text-decoration: none;
}

.dashboard {
	padding: 4rem 0;
}

.dashboard-card {
	max-width: 720px;
}

.studio-launch {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin: .5rem 0 1.5rem;
	padding: .75rem 1rem;
	border: 1px solid #3f3f46;
	border-radius: .75rem;
	background: #090b16;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.studio-launch:hover {
	border-color: #7c3aed;
	color: #fff;
}

.brand-logo--studio-card {
	width: min(220px, 48vw);
}

.permission-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 0;
	list-style: none;
}

.permission-list li {
	padding: .35rem .6rem;
	border: 1px solid #3f3f46;
	border-radius: 999px;
	color: #d4d4d8;
	font-size: .8rem;
}

.logout-form {
	margin: 0;
}

.logout-form button {
	min-height: auto;
	padding: .5rem .75rem;
	background: #27272a;
}

/* Eigenständiges Salesflw-Layout für das portierte KI-Studio. */
.studio-page {
	color-scheme: light;
	background: #f3f5f8;
	color: #263238;
}

.studio-header {
	position: sticky;
	top: 0;
	z-index: 1030;
}

.studio-header__inner {
	gap: 1.25rem;
	width: min(1480px, calc(100% - 2rem));
}

.studio-navigation {
	display: flex;
	flex: 1;
	align-items: center;
	gap: .25rem;
	overflow-x: auto;
}

.studio-navigation__link {
	padding: .55rem .7rem;
	border-radius: .45rem;
	color: #d4d4d8;
	font-size: .88rem;
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
}

.studio-navigation__link:hover,
.studio-navigation__link.is-active {
	background: #27272a;
	color: #fff;
	text-decoration: none;
}

.studio-main {
	padding: 1.25rem 0 3rem;
}

.studio-shell {
	width: min(1480px, calc(100% - 2rem));
}

.studio-breadcrumb {
	margin-bottom: 1rem;
	padding: .7rem 1rem;
	border: 1px solid #e1e5ea;
	background: #fff;
}

.studio-page-heading {
	margin: 0 0 1rem;
}

.studio-page-heading h1 {
	margin: 0;
	color: #263238;
	font-size: 1.5rem;
}

.studio-page-heading p {
	margin: .3rem 0 0;
	color: #78909c;
}

.studio-page .box {
	margin-bottom: 1.25rem;
	border: 1px solid #e1e5ea;
	border-radius: .5rem;
	background: #fff;
	box-shadow: 0 2px 8px rgba(38, 50, 56, .06);
}

.studio-page .box-header {
	padding: 1rem 1.25rem;
}

.studio-page .box-header.with-border {
	border-bottom: 1px solid #e8ecef;
}

.studio-page .box-body {
	padding: 1.25rem;
}

.studio-page .box-footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid #e8ecef;
	background: #fafbfc;
}

.studio-page .mb-20 {
	margin-bottom: 20px;
}

.studio-page .card {
	width: auto;
	padding: 0;
	border-radius: .5rem;
	background: #fff;
	box-shadow: none;
}

.studio-page .form-control,
.studio-page input,
.studio-page select,
.studio-page textarea {
	width: 100%;
	padding: .375rem .75rem;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	background: #fff;
	color: #495057;
	font: inherit;
}

.studio-page .form-control:focus,
.studio-page input:focus,
.studio-page select:focus,
.studio-page textarea:focus {
	border-color: #9d7bea;
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .15);
}

.studio-page input[type="checkbox"],
.studio-page input[type="radio"],
.studio-page input[type="range"],
.studio-page input[type="color"] {
	width: auto;
	padding: 0;
}

.studio-page button.btn {
	min-height: auto;
	padding: .375rem .75rem;
	border: 1px solid transparent;
	border-radius: .25rem;
	font-weight: 400;
}

.studio-page .btn-primary,
.studio-page .btn-primary:hover {
	border-color: #7c3aed;
	background: #7c3aed;
}

.studio-page .btn-default {
	border-color: #d7dce1;
	background: #fff;
	color: #455a64;
}

.studio-page .btn-default:hover {
	border-color: #bcc5cc;
	background: #f4f6f8;
}

@media (max-width: 820px) {
	.studio-header__inner {
		flex-wrap: wrap;
		padding: .65rem 0;
	}

	.studio-navigation {
		order: 3;
		flex-basis: 100%;
	}
}

@media (max-width: 520px) {
	.card {
		padding: 1.5rem;
	}

	.app-header .shell {
		min-height: 4rem;
	}

	.brand-logo--header,
	.brand-logo--studio-header {
		width: 150px;
	}

	.studio-launch {
		align-items: flex-start;
		flex-direction: column;
	}

	.brand-logo--studio-card {
		width: min(220px, 100%);
	}
}

.button-secondary {
	background: #27272a;
}

.admin-header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.admin-topbar {
	width: min(1440px, calc(100% - 2rem));
}

.admin-user {
	display: none;
}

.admin-body .app-header .shell {
	width: min(1440px, calc(100% - 2rem));
}

.admin-frame {
	display: grid;
	grid-template-columns: 16.5rem minmax(0, 1fr);
	width: min(1440px, calc(100% - 2rem));
	margin: 0 auto;
	min-height: calc(100vh - 4.5rem);
}

.admin-sidebar {
	padding: 1.5rem 1.25rem 2.5rem 0;
	border-right: 1px solid #27272a;
}

.admin-sidebar .eyebrow {
	margin-bottom: 1rem;
}

.admin-nav {
	display: grid;
	gap: .2rem;
}

.admin-nav__link {
	display: block;
	padding: .55rem .75rem;
	border-radius: .55rem;
	color: #d4d4d8;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}

.admin-nav__link:hover {
	background: rgba(39, 39, 42, .8);
	color: #fafafa;
}

.admin-nav__link.is-active {
	background: rgba(124, 58, 237, .18);
	color: #ede9fe;
}

.admin-content {
	padding: 1.5rem 0 4rem 1.75rem;
}

.admin-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	color: #a1a1aa;
	font-size: .82rem;
}

.admin-breadcrumb li:not(:last-child)::after {
	content: '/';
	margin-left: .35rem;
	color: #52525b;
}

.admin-breadcrumb a {
	color: #c4b5fd;
	text-decoration: none;
}

.admin-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.admin-heading h1 {
	margin-bottom: .25rem;
}

.admin-heading .muted {
	margin: 0;
}

.admin-period {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .65rem;
}

.admin-period label {
	display: grid;
	gap: .3rem;
	font-size: .75rem;
}

.admin-period input[type='date'] {
	width: auto;
	min-width: 10.5rem;
	padding: .55rem .7rem;
}

.admin-period button {
	min-height: 2.4rem;
	padding: .5rem .9rem;
}

.admin-body textarea,
.admin-body select {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid #3f3f46;
	border-radius: .65rem;
	background: #18181b;
	color: #fafafa;
	font: inherit;
}

.admin-body textarea:focus,
.admin-body select:focus {
	border-color: #8b5cf6;
	outline: 3px solid rgba(139, 92, 246, .18);
}

.admin-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1rem;
	margin: 1.25rem 0 1.75rem;
}

.admin-stat,
.admin-panel {
	padding: 1.15rem 1.2rem;
	border: 1px solid #27272a;
	border-radius: 1rem;
	background: rgba(24, 24, 27, .92);
}

.admin-stat__label {
	margin: 0 0 .35rem;
	color: #a1a1aa;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.admin-stat__value {
	margin: 0;
	font-size: 1.55rem;
	font-weight: 800;
}

.admin-stat .muted {
	margin: .4rem 0 0;
	font-size: .8rem;
}

.admin-delta {
	margin: .35rem 0 0;
	color: #a1a1aa;
	font-size: .8rem;
}

.admin-delta.is-more {
	color: #c4b5fd;
}

.admin-delta.is-less {
	color: #86efac;
}

.admin-live-note {
	margin: 0 0 1rem;
	color: #a1a1aa;
	font-size: .85rem;
}

.admin-panel h2 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.admin-table th,
.admin-table td {
	padding: .7rem .55rem;
	border-bottom: 1px solid #27272a;
	text-align: left;
	vertical-align: top;
}

.admin-table th {
	color: #a1a1aa;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.admin-badge {
	display: inline-flex;
	align-items: center;
	padding: .15rem .5rem;
	border: 1px solid #52525b;
	border-radius: 999px;
	color: #d4d4d8;
	font-size: .75rem;
	white-space: nowrap;
}

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

	.admin-sidebar {
		padding: 1.15rem 0 1rem;
		border-right: 0;
		border-bottom: 1px solid #27272a;
	}

	.admin-nav {
		display: flex;
		flex-wrap: wrap;
		gap: .35rem;
	}

	.admin-content {
		padding: 1.25rem 0 3rem;
	}

	.admin-user {
		display: none;
	}
}

@media (min-width: 720px) {
	.admin-user {
		display: inline;
	}
}

.integration-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 1.25rem;
	align-items: start;
}

.integration-card {
	width: 100%;
	max-width: none;
}

.integration-card__heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.integration-card h2 {
	margin: 0;
}

.integration-card__heading .muted {
	margin: .35rem 0 0;
	font-size: .8rem;
}

.integration-status {
	padding: .25rem .55rem;
	border: 1px solid #52525b;
	border-radius: 999px;
	color: #d4d4d8;
	font-size: .75rem;
	white-space: nowrap;
}

.integration-status.is-enabled {
	border-color: #15803d;
	color: #bbf7d0;
}

.integration-card label small {
	margin-left: .35rem;
	color: #a1a1aa;
	font-weight: 400;
}

.field-help {
	margin: 0;
	color: #a1a1aa;
	font-size: .78rem;
}

.check-list {
	display: grid;
	gap: .55rem;
}

.check-row {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	color: #d4d4d8;
	font-size: .82rem;
	font-weight: 500;
}

.check-row input {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-top: .1rem;
	padding: 0;
}

.integration-enabled {
	margin: 1.25rem 0;
}

.admin-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1rem;
	margin: 1.25rem 0;
}

.admin-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-end;
	margin: 0 0 1.25rem;
}

.admin-filters label {
	display: grid;
	gap: .3rem;
	font-size: .75rem;
}

.admin-filters input,
.admin-filters select {
	min-width: 8rem;
}

.admin-filters .button,
.admin-filters a.button {
	min-height: 2.4rem;
}

.admin-stat__chart {
	margin-top: .75rem;
}

.admin-chart {
	display: block;
	max-width: 100%;
	height: auto;
}

.admin-donut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.admin-legend {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
}

.admin-legend li {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: .2rem 0;
}

.admin-legend__swatch {
	display: inline-flex;
}

.admin-warn-list {
	margin: 0;
	padding-left: 1.1rem;
}

.admin-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1rem;
}

.admin-pager ol {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.admin-pager a,
.admin-pager span {
	display: inline-flex;
	min-width: 2rem;
	justify-content: center;
	padding: .25rem .45rem;
	border: 1px solid #3f3f46;
	border-radius: .4rem;
	text-decoration: none;
}

.admin-pager span {
	border-color: #7c3aed;
	color: #ede9fe;
}

.admin-catalog {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #27272a;
}

.admin-catalog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: .75rem;
	margin: .75rem 0;
}

.admin-panel h3 {
	margin: 0 0 .5rem;
	font-size: .9rem;
}

/* Verlässlicher vertikaler Rhythmus für alle Adminseiten. */
.admin-content main > .admin-panel + .admin-panel,
.admin-content main > form + .admin-panel,
.admin-content main > .admin-panel + form,
.admin-content main > form > .admin-panel + .admin-panel {
	margin-top: 1.25rem;
}

/* videoflw V2 Policy-Steuerung ---------------------------------------- */
.vf-policy-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: .75rem;
	margin-bottom: 1rem;
}

.vf-policy-summary__item,
.vf-policy-summary__link {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 4.35rem;
	padding: .8rem 1rem;
	border: 1px solid #27272a;
	border-radius: .85rem;
	background: linear-gradient(145deg, rgba(39, 39, 42, .8), rgba(18, 18, 22, .94));
}

.vf-policy-summary__item > .mdi {
	display: grid;
	width: 2.2rem;
	height: 2.2rem;
	place-items: center;
	border-radius: .65rem;
	background: rgba(124, 58, 237, .16);
	color: #a78bfa;
	font-size: 1.15rem;
}

.vf-policy-summary__item div {
	display: grid;
	gap: .12rem;
}

.vf-policy-summary small,
.vf-tier-tab small {
	color: #a1a1aa;
	font-size: .72rem;
	font-weight: 500;
}

.vf-policy-summary__link {
	justify-content: center;
	color: #c4b5fd;
	font-weight: 700;
	text-decoration: none;
}

.vf-policy-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
	align-items: end;
	gap: 2rem;
}

.vf-policy-head h2,
.vf-section-heading h2 {
	margin-bottom: .35rem;
}

.vf-policy-name,
.vf-rules-grid label,
.vf-media-card > label,
.vf-media-options > label,
.vf-role-main label,
.vf-role-advanced label {
	display: grid;
	gap: .38rem;
}

.vf-kicker {
	margin: 0 0 .35rem;
	color: #a78bfa;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vf-tier-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	margin: 1rem 0;
	padding: .35rem;
	border: 1px solid #27272a;
	border-radius: 1rem;
	background: rgba(9, 9, 11, .75);
}

.vf-tier-tab {
	justify-content: flex-start;
	gap: .8rem;
	min-width: 0;
	padding: .8rem 1rem;
	background: transparent;
	color: #d4d4d8;
	text-align: left;
}

.vf-tier-tab:hover {
	background: #27272a;
}

.vf-tier-tab.is-active {
	background: linear-gradient(135deg, #6d28d9, #4f46e5);
	box-shadow: 0 10px 30px rgba(79, 70, 229, .2);
	color: #fff;
}

.vf-tier-tab > .mdi {
	font-size: 1.35rem;
}

.vf-tier-tab > span:last-child {
	display: grid;
	min-width: 0;
	gap: .12rem;
}

.vf-tier-tab.is-active small {
	color: #ddd6fe;
}

.vf-tier-panel[hidden],
[data-vf-provider-only][hidden] {
	display: none !important;
}

.vf-policy-section {
	margin-bottom: 1rem;
	padding: 1.35rem;
}

.vf-section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: 1.15rem;
}

.vf-section-heading .muted {
	max-width: 34rem;
	margin: 0;
	font-size: .82rem;
	text-align: right;
}

.vf-rules-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .8rem;
}

.vf-rules-grid label,
.vf-role-main label,
.vf-role-advanced label,
.vf-media-card > label,
.vf-media-options > label {
	color: #d4d4d8;
	font-size: .78rem;
}

.vf-rules-grid label small {
	min-height: 1em;
	color: #71717a;
	font-size: .68rem;
	font-weight: 500;
}

.vf-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.vf-role-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.vf-media-card,
.vf-role-card {
	min-width: 0;
	padding: 1rem;
	border: 1px solid #303039;
	border-radius: .9rem;
	background: linear-gradient(150deg, rgba(31, 31, 37, .92), rgba(16, 16, 20, .96));
}

.vf-media-card > header,
.vf-role-card > header {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
}

.vf-media-card header h3,
.vf-role-card header h3 {
	margin: 0 0 .16rem;
	font-size: .94rem;
}

.vf-media-card header p,
.vf-role-card header p {
	margin: 0;
	color: #a1a1aa;
	font-size: .72rem;
	font-weight: 500;
}

.vf-media-card__icon,
.vf-role-card__icon {
	display: grid;
	flex: 0 0 auto;
	width: 2.55rem;
	height: 2.55rem;
	place-items: center;
	border: 1px solid rgba(139, 92, 246, .28);
	border-radius: .75rem;
	background: rgba(124, 58, 237, .14);
	color: #a78bfa;
	font-size: 1.25rem;
}

.vf-media-options,
.vf-role-main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin-top: .75rem;
}

.vf-check-option {
	display: flex !important;
	align-items: center;
	align-self: end;
	min-height: 3rem;
	padding: .55rem .7rem;
	border: 1px solid #3f3f46;
	border-radius: .65rem;
	background: #18181b;
}

.vf-check-option input {
	width: auto;
	margin: 0 .65rem 0 0;
}

.vf-check-option span {
	display: grid;
	gap: .1rem;
}

.vf-check-option small {
	color: #71717a;
	font-size: .66rem;
}

.vf-media-card footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid #27272a;
	font-size: .72rem;
}

.vf-media-card footer a {
	color: #c4b5fd;
}

.vf-provider-state {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: #a1a1aa;
}

.vf-provider-state i {
	width: .48rem;
	height: .48rem;
	border-radius: 50%;
	background: #71717a;
}

.vf-provider-state.is-ready i {
	background: #34d399;
	box-shadow: 0 0 0 4px rgba(52, 211, 153, .1);
}

.vf-provider-state.is-missing i {
	background: #fb7185;
	box-shadow: 0 0 0 4px rgba(251, 113, 133, .1);
}

.vf-inline-note {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 1rem 0 0;
	padding: .75rem .85rem;
	border: 1px solid #303039;
	border-radius: .7rem;
	background: rgba(9, 9, 11, .45);
	color: #a1a1aa;
	font-size: .76rem;
}

.vf-inline-note .mdi {
	color: #a78bfa;
	font-size: 1rem;
}

.vf-fal-video-hint {
	margin: .55rem 0 0;
	padding: .55rem .7rem;
	border: 1px solid rgba(251, 191, 36, .28);
	border-radius: .65rem;
	background: rgba(251, 191, 36, .08);
	color: #fde68a;
	font-size: .72rem;
	line-height: 1.35;
}

.vf-rules-grid [data-vf-video-attempts-field].is-fal-locked input {
	opacity: .72;
	cursor: default;
}

.vf-role-card > header > div {
	min-width: 0;
	margin-right: auto;
}

.vf-role-main {
	grid-template-columns: .75fr 1.45fr .8fr;
}

.vf-switch {
	position: relative;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 1.35rem;
}

.vf-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vf-switch span {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #3f3f46;
	cursor: pointer;
}

.vf-switch span::after {
	position: absolute;
	top: .18rem;
	left: .18rem;
	width: .99rem;
	height: .99rem;
	border-radius: 50%;
	background: #fff;
	content: '';
	transition: transform .18s ease;
}

.vf-switch input:checked + span {
	background: #7c3aed;
}

.vf-switch input:checked + span::after {
	transform: translateX(1.05rem);
}

.vf-role-advanced {
	margin-top: .85rem;
	border-top: 1px solid #2f2f35;
}

.vf-role-advanced summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: .75rem;
	color: #a1a1aa;
	cursor: pointer;
	font-size: .75rem;
	font-weight: 700;
	list-style: none;
}

.vf-role-advanced summary::-webkit-details-marker {
	display: none;
}

.vf-role-advanced[open] summary .mdi {
	transform: rotate(180deg);
}

.vf-role-advanced > div {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .65rem;
	margin-top: .75rem;
}

.vf-policy-actions {
	position: sticky;
	bottom: .75rem;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0 1.5rem;
	padding: .8rem .9rem .8rem 1.1rem;
	border: 1px solid #3f3f46;
	border-radius: .9rem;
	background: rgba(24, 24, 27, .95);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
	backdrop-filter: blur(12px);
}

.vf-policy-actions p {
	margin: 0;
	color: #a1a1aa;
	font-size: .78rem;
}

.vf-policy-actions button {
	gap: .45rem;
}

.vf-policy-versions {
	margin-top: 1rem;
}

.vf-table-scroll {
	overflow-x: auto;
}

.vf-version-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.vf-version-actions form {
	margin: 0;
}

.vf-version-actions button {
	min-height: 2.1rem;
	padding: .45rem .7rem;
	font-size: .76rem;
}

.vf-button-secondary {
	border: 1px solid #3f3f46;
	background: #27272a;
}

.vf-badge-active {
	border-color: rgba(52, 211, 153, .4);
	background: rgba(52, 211, 153, .1);
	color: #6ee7b7;
}

@media (max-width: 1150px) {
	.vf-policy-summary { grid-template-columns: repeat(3, 1fr); }
	.vf-policy-summary__link { grid-column: 1 / -1; min-height: 3rem; }
	.vf-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vf-role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.vf-policy-summary,
	.vf-policy-head,
	.vf-media-grid { grid-template-columns: 1fr; }
	.vf-policy-summary__link { grid-column: auto; }
	.vf-tier-tabs { display: flex; overflow-x: auto; }
	.vf-tier-tab { flex: 0 0 min(82vw, 18rem); }
	.vf-section-heading { display: block; }
	.vf-section-heading .muted { margin-top: .35rem; text-align: left; }
	.vf-role-main,
	.vf-role-advanced > div { grid-template-columns: 1fr; }
	.vf-policy-actions { align-items: stretch; flex-direction: column; }
	.vf-policy-actions button { width: 100%; }
}

.admin-song {
	margin: 0 0 1.25rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid #27272a;
}

.admin-song:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.admin-song.is-archived {
	opacity: .62;
}

.admin-song__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	margin-bottom: .65rem;
}

.admin-song__head strong {
	margin-right: .45rem;
}

.admin-song__player {
	width: min(100%, 280px);
	height: 36px;
}

.admin-hashtags {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
}

.admin-hashtags li {
	padding: .15rem .5rem;
	border: 1px solid #3f3f46;
	border-radius: 999px;
	color: #c4b5fd;
	font-size: .75rem;
}

.admin-song__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .85rem;
}

.admin-song__actions form {
	margin: 0;
}

.admin-song__actions button {
	min-height: 2.2rem;
}

/* videoflw Produktionsprotokolle ------------------------------------- */
.production-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.production-kpis article { display: grid; gap: .22rem; min-width: 0; padding: 1rem 1.05rem; border: 1px solid #303039; border-radius: .9rem; background: linear-gradient(145deg,rgba(24,24,27,.96),rgba(12,12,17,.96)); }
.production-kpis span { color: #a1a1aa; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.production-kpis strong { font-size: 1.55rem; line-height: 1.1; }
.production-kpis small { color: #71717a; font-size: .68rem; }
.production-filters { display: grid; grid-template-columns: minmax(16rem,1.8fr) repeat(3,minmax(9rem,.65fr)) auto auto; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.production-filters label { min-width: 0; }
.production-filters input,.production-filters select { width: 100%; }
.production-filters button,.production-reset { min-height: 2.7rem; justify-content: center; white-space: nowrap; }
.production-panel { padding: 1.25rem; }
.production-panel__header { margin-bottom: 1rem; }
.production-panel__header h2 { margin: 0 0 .3rem; }
.production-panel__header p { margin: 0; max-width: 58rem; }
.production-list { display: grid; gap: .75rem; }
.production-row { position: relative; display: grid; gap: .85rem; padding: 1rem; overflow: hidden; border: 1px solid #303039; border-radius: .9rem; background: #111116; }
.production-row:hover { border-color: #45454f; background: #141419; }
.production-row__main { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.production-row__icon { display: grid; flex: 0 0 2.65rem; height: 2.65rem; place-items: center; border-radius: .75rem; background: rgba(124,58,237,.15); color: #a78bfa; font-size: 1.25rem; }
.production-row__main > div:last-child { min-width: 0; }
.production-row__main p,.production-row__main small { margin: .18rem 0 0; color: #8f8f9b; }
.production-row__main small { display: block; overflow: hidden; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.production-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.production-row__title strong { font-size: 1rem; }
.production-status { display: inline-flex; align-items: center; min-height: 1.45rem; padding: .18rem .48rem; border: 1px solid rgba(96,165,250,.3); border-radius: 999px; background: rgba(59,130,246,.1); color: #93c5fd; font-size: .66rem; font-weight: 800; }
.production-status.is-complete { border-color: rgba(52,211,153,.32); background: rgba(16,185,129,.1); color: #6ee7b7; }
.production-status.is-attention { border-color: rgba(251,146,60,.34); background: rgba(249,115,22,.1); color: #fdba74; }
.production-status.is-quality { border-color: rgba(250,204,21,.3); background: rgba(234,179,8,.08); color: #fde047; }
.production-row__facts { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .55rem; }
.production-row__facts > div { display: grid; gap: .18rem; min-width: 0; padding: .6rem .68rem; border: 1px solid #27272f; border-radius: .65rem; background: #0d0d12; }
.production-row__facts span { color: #71717a; font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.production-row__facts strong { overflow: hidden; color: #d4d4d8; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.production-models { display: flex; flex-wrap: wrap; gap: .35rem; }
.production-models span { padding: .25rem .5rem; border: 1px solid #33333c; border-radius: 999px; color: #a1a1aa; font-size: .66rem; }
.production-progress { height: .25rem; overflow: hidden; border-radius: 999px; background: #27272f; }
.production-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6d28d9,#a855f7); }
.production-error { display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .65rem .75rem; border: 1px solid rgba(248,113,113,.24); border-radius: .65rem; background: rgba(127,29,29,.12); color: #fca5a5; font-size: .73rem; }
.production-row footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #71717a; font-size: .72rem; }
.production-row footer a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .45rem .7rem; border: 1px solid rgba(139,92,246,.35); border-radius: .6rem; background: rgba(124,58,237,.12); color: #c4b5fd; font-weight: 750; }
.production-row footer a:hover { border-color: #8b5cf6; background: rgba(124,58,237,.22); color: #fff; }
.production-empty { display: grid; justify-items: center; gap: .35rem; padding: 4rem 1rem; color: #71717a; text-align: center; }
.production-empty i { color: #52525b; font-size: 2.4rem; }.production-empty strong { color: #d4d4d8; }

@media (max-width: 1250px) { .production-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }.production-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }.production-search { grid-column: span 2; }.production-row__facts { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) { .production-kpis,.production-filters,.production-row__facts { grid-template-columns: 1fr; }.production-search { grid-column: auto; }.production-row footer { align-items: stretch; flex-direction: column; }.production-row footer a { justify-content: center; }.production-row__main small { max-width: 75vw; } }

/* videoflw Prompt-Steuerung ------------------------------------------- */
.vfp-form { display: grid; gap: 1.25rem; }
.admin-content main > .vfp-form > .admin-panel + .admin-panel { margin-top: 0; }
.vfp-version-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 32rem); align-items: end; gap: 2rem; }
.vfp-version-head h2,.vfp-section-head h2 { margin-bottom: .35rem; }
.vfp-version-head > label,.vfp-profile-basics label,.vfp-profile-editors label { display: grid; gap: .4rem; }
.vfp-editor,.vfp-profiles,.vfp-versions { padding: 1.35rem; }
.vfp-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.15rem; }
.vfp-section-head p { margin: 0; }
.vfp-language,.vfp-count { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid rgba(139,92,246,.28); border-radius: 999px; background: rgba(124,58,237,.1); color: #c4b5fd; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.vfp-path-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; margin-bottom: 1rem; }
.vfp-path-tab,.vfp-role-tab { display: flex; align-items: center; gap: .7rem; border: 1px solid #303039; background: #111116; color: #d4d4d8; text-align: left; }
.vfp-path-tab { min-height: 4.65rem; padding: .8rem .9rem; border-radius: .8rem; }
.vfp-path-tab > i { display: grid; flex: 0 0 2.25rem; height: 2.25rem; place-items: center; border-radius: .65rem; background: #22222a; color: #a1a1aa; font-size: 1.15rem; }
.vfp-path-tab span,.vfp-role-tab span,.vfp-profile-card summary > span:nth-child(2) { display: grid; gap: .16rem; min-width: 0; }
.vfp-path-tab small,.vfp-role-tab small,.vfp-profile-card summary small { color: #8f8f9b; font-size: .7rem; font-weight: 500; line-height: 1.25; }
.vfp-path-tab.is-active { border-color: #7c3aed; background: linear-gradient(145deg,rgba(91,33,182,.26),rgba(30,27,75,.28)); box-shadow: inset 0 0 0 1px rgba(167,139,250,.08); }
.vfp-path-tab.is-active > i { background: linear-gradient(145deg,#7c3aed,#4f46e5); color: #fff; }
.vfp-path-panel { display: grid; grid-template-columns: minmax(14rem,18rem) minmax(0,1fr); min-height: 37rem; overflow: hidden; border: 1px solid #303039; border-radius: .95rem; background: #101014; }
.vfp-path-panel[hidden],.vfp-prompt-panel[hidden] { display: none !important; }
.vfp-role-nav { display: grid; align-content: start; gap: .35rem; padding: .7rem; border-right: 1px solid #303039; background: rgba(9,9,13,.72); }
.vfp-role-tab { width: 100%; padding: .68rem .7rem; border-color: transparent; border-radius: .65rem; }
.vfp-role-tab > i:first-child { color: #8b8b98; font-size: 1.05rem; }
.vfp-role-tab > i:last-child { margin-left: auto; color: #52525b; }
.vfp-role-tab.is-active { border-color: rgba(139,92,246,.32); background: rgba(124,58,237,.15); color: #f5f3ff; }
.vfp-role-tab.is-active > i { color: #a78bfa; }
.vfp-prompt-stage { min-width: 0; padding: 1.2rem 1.25rem 1.25rem; }
.vfp-prompt-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.vfp-prompt-panel > header span:first-child { color: #a78bfa; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vfp-prompt-panel h3 { margin: .25rem 0 .3rem; font-size: 1.2rem; }
.vfp-prompt-panel p { margin: 0; color: #a1a1aa; font-size: .82rem; }
.vfp-saved-state,.vfp-active-label { display: inline-flex; align-items: center; gap: .35rem; color: #86efac; font-size: .72rem; white-space: nowrap; }
.vfp-prompt-field { display: grid; gap: .45rem; }
.vfp-prompt-field > span { font-size: .78rem; font-weight: 700; }
.admin-body .vfp-prompt-field textarea { min-height: 27rem; padding: 1rem 1.05rem; border-color: #383842; background: #17171d; font-size: .88rem; font-weight: 450; line-height: 1.65; resize: vertical; }
.vfp-prompt-field small,.vfp-profile-editors label > small { color: #7f7f8c; font-size: .7rem; }
.vfp-profile-list { display: grid; gap: .7rem; }
.vfp-profile-card { overflow: hidden; border: 1px solid #303039; border-radius: .85rem; background: #111116; }
.vfp-profile-card summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: .8rem; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.vfp-profile-card summary::-webkit-details-marker { display: none; }
.vfp-provider-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .65rem; background: rgba(124,58,237,.14); color: #a78bfa; }
.vfp-profile-summary { color: #a1a1aa; font-size: .75rem; }
.vfp-profile-card[open] > summary { border-bottom: 1px solid #303039; background: rgba(39,39,42,.5); }
.vfp-profile-card[open] > summary > i:last-child { transform: rotate(180deg); }
.vfp-profile-body { display: grid; gap: 1rem; padding: 1rem; }
.vfp-profile-basics { display: grid; grid-template-columns: .75fr 1.6fr .75fr .85fr; gap: .75rem; }
.vfp-profile-editors { display: grid; grid-template-columns: minmax(12rem,.75fr) minmax(18rem,1fr) minmax(18rem,1fr); align-items: start; gap: .75rem; }
.vfp-code { font-family: ui-monospace,SFMono-Regular,Consolas,monospace !important; font-size: .78rem !important; line-height: 1.5; }
.vfp-savebar { position: sticky; bottom: .75rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid rgba(139,92,246,.38); border-radius: .9rem; background: rgba(17,17,22,.96); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.32); backdrop-filter: blur(12px); }
.vfp-savebar > div { display: grid; gap: .15rem; }
.vfp-savebar span { color: #a1a1aa; font-size: .75rem; }
.vfp-savebar button { display: inline-flex; align-items: center; gap: .45rem; }

@media (max-width: 1180px) {
	.vfp-path-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.vfp-profile-basics { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.vfp-profile-editors { grid-template-columns: 1fr 1fr; }
	.vfp-profile-editors > label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
	.vfp-version-head { grid-template-columns: 1fr; gap: 1rem; }
	.vfp-section-head { flex-direction: column; }
	.vfp-path-panel { grid-template-columns: 1fr; }
	.vfp-role-nav { grid-template-columns: repeat(2,minmax(0,1fr)); border-right: 0; border-bottom: 1px solid #303039; }
	.vfp-role-tab > i:last-child { display: none; }
	.vfp-profile-editors { grid-template-columns: 1fr; }
	.vfp-profile-editors > label:first-child { grid-column: auto; }
	.vfp-profile-summary { display: none; }
}
@media (max-width: 560px) {
	.vfp-path-tabs,.vfp-role-nav,.vfp-profile-basics { grid-template-columns: 1fr; }
	.vfp-prompt-panel > header,.vfp-savebar { align-items: stretch; flex-direction: column; }
	.vfp-savebar button { justify-content: center; width: 100%; }
}