.dialog {
	width: 22rem;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--fg);
}

.dialog::backdrop {
	background: rgba(0, 0, 0, 0.35);
}

.dialog form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dialog p {
	margin: 0;
}

.dialog label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--muted);
	font-size: 14px;
}

.dialog input {
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	color: var(--fg);
	font: inherit;
}

.dialog button {
	padding: 8px 12px;
	border: 1px solid var(--accent);
	border-radius: 8px;
	background: var(--accent);
	color: var(--bg);
	font: inherit;
	cursor: pointer;
}

.dialog button:disabled {
	cursor: wait;
	opacity: 0.7;
}

.dialog-message {
	margin: 0;
	color: var(--accent);
	font-size: 14px;
}

.dialog-message.ok {
	color: var(--fg);
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.dialog-actions button[value="cancel"] {
	border-color: var(--line);
	background: var(--bg);
	color: var(--fg);
}