/* styles.css */
:root {
	--bg: #0b0d12;
	--panel: #141922;
	--text: #e5e7eb;
	--muted: #9ca3af;
	--accent: #7c3aed;
	--border: #232936;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
	background: linear-gradient(180deg, #0b0d12 0%, #0e111a 100%);
	color: var(--text);
}

.container { width: min(1100px, 92vw); margin: 24px auto; }
h1 { margin: 0 0 8px 0; font-size: 28px; }
h2 { margin: 16px 0; font-size: 18px; }
p { color: var(--muted); }

.grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 16px;
}
@media (max-width: 920px) {
	.grid { grid-template-columns: 1fr; }
}

.panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px;
}

.row, .row-2, .row-3 { display: grid; gap: 10px; margin: 10px 0; }
.row { grid-template-columns: 160px 1fr; align-items: center; }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }

.fieldset {
	border: 1px dashed var(--border);
	padding: 10px;
	border-radius: 10px;
}

label span { color: var(--muted); font-size: 12px; display: block; margin-bottom: 6px; }
input, select, textarea, button {
	background: #0f1420;
	border: 1px solid #1f2533;
	border-radius: 10px;
	color: var(--text);
	padding: 10px 12px;
	font-size: 14px;
	outline: none;
}
textarea { resize: vertical; }

.actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.actions .inline { display: inline; }
button {
	cursor: pointer;
	background: linear-gradient(180deg, #7c3aed, #5b21b6);
	border: 1px solid #6d28d9;
	box-shadow: 0 10px 25px rgba(124, 58, 237, 0.25);
}
button:hover { filter: brightness(1.06); }

.preview { display: flex; flex-direction: column; }
.preview-box {
	display: grid;
	place-items: center;
	min-height: 420px;
	background: #0e1420;
	border: 1px dashed #253047;
	border-radius: 14px;
}

.foot { color: var(--muted); text-align: center; }

/* Hide all type-specific fields by default; show via JS */
[class*="type-"] { display: none; }