.vr-plugin-shell {
	--vr-primary: #1f4b99;
	--vr-warning: #b42318;
	--vr-ink: #111827;
	--vr-subtle: #6b7280;
	--vr-surface: #ffffff;
	--vr-bg: linear-gradient(160deg, #f4f8ff 0%, #f8fafc 60%, #eef6ff 100%);
	font-family: "Trebuchet MS", "Segoe UI", sans-serif;
	color: var(--vr-ink);
	background: var(--vr-bg);
	border: 1px solid #d7def0;
	border-radius: 18px;
	padding: 24px;
	max-width: 880px;
	margin: 16px auto;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.vr-view-frame {
	transform-origin: top center;
}

.vr-card {
	background: var(--vr-surface);
	border-radius: 14px;
	padding: 24px;
	border: 1px solid #e5e7eb;
}

.vr-title {
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 8px;
	letter-spacing: 0.2px;
}

.vr-subtitle {
	margin: 0 0 18px;
	color: var(--vr-subtle);
}

.vr-alert {
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 14px;
}

.vr-alert--error {
	background: #fff1f3;
	border: 1px solid #fecdd3;
	color: #9f1239;
}

.vr-alert--info {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e3a8a;
}

.vr-textarea,
.vr-input,
.vr-select {
	width: 100%;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	margin-bottom: 12px;
	box-sizing: border-box;
	background: #fff;
}

.vr-textarea {
	min-height: 130px;
	resize: vertical;
}

.vr-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 12px;
}

.vr-btn {
	border: 0;
	border-radius: 10px;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.vr-btn[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}

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

.vr-btn--ghost {
	background: #e5ecfa;
	color: #1f355e;
}

.vr-btn--warning {
	background: var(--vr-warning);
	color: #fff;
}

.vr-loading {
	display: grid;
	place-items: center;
	min-height: 280px;
	text-align: center;
}

.vr-radar {
	width: 86px;
	height: 86px;
	border: 5px solid rgba(31, 75, 153, 0.18);
	border-top-color: var(--vr-primary);
	border-right-color: var(--vr-primary);
	border-radius: 50%;
	animation: vr-spin 1.05s linear infinite;
	margin-bottom: 14px;
}

.vr-loading p {
	margin: 0;
	font-weight: 700;
	color: #1f355e;
}

.vr-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 14px 0;
}

.vr-metric {
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px;
}

.vr-metric__label {
	font-size: 13px;
	color: #475569;
	margin-bottom: 4px;
}

.vr-metric__value {
	font-size: 19px;
	font-weight: 800;
}

.vr-metric__value--critical {
	color: var(--vr-warning);
}

.vr-notes {
	background: #fff5f5;
	border: 1px solid #f3caca;
	border-radius: 10px;
	padding: 12px 14px;
	margin-top: 14px;
}

.vr-notes ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

.vr-followup-field {
	margin-bottom: 14px;
}

.vr-followup-field__label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

.vr-legal {
	background: #f8fafc;
	border: 1px solid #dbe4f0;
	border-radius: 10px;
	padding: 12px 14px;
	margin-top: 12px;
}

.vr-legal ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

.vr-legal a {
	color: var(--vr-primary);
}

.vr-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.vr-manual-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 12px;
}

.vr-fieldset {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px;
	background: #f9fafb;
}

.vr-fieldset legend {
	padding: 0 8px;
	font-weight: 700;
	color: #1f355e;
}

.vr-checkbox {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	margin: 10px 0;
}

.vr-footer {
	margin-top: 12px;
	font-size: 12px;
	color: #6b7280;
}

.vr-footer a {
	color: var(--vr-primary);
}

.vr-success {
	padding: 28px;
	text-align: center;
}

.vr-success h3 {
	margin: 0 0 8px;
	font-size: 28px;
	color: #175c2c;
}

@keyframes vr-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 900px) {
	.vr-metrics,
	.vr-form-row,
	.vr-manual-grid {
		grid-template-columns: 1fr;
	}

	.vr-plugin-shell {
		padding: 14px;
	}

	.vr-card {
		padding: 16px;
	}

	.vr-title {
		font-size: 24px;
	}
}