:root {
	--bg: #f4f6fb;
	--card: #ffffff;
	--ink: #16202f;
	--muted: #5b6a80;
	--line: #dfe5ee;
	--brand: #2f6bff;
	--brand-dark: #1c4fd0;
	--danger: #b3261e;
	--danger-bg: #fdecea;
	--radius: 14px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.55 system-ui, "Segoe UI", Roboto, "Noto Sans Devanagari", Arial, sans-serif;
}

.topbar {
	background: linear-gradient(135deg, #2f6bff, #6b3bff);
	color: #fff;
	padding: 28px 20px 34px;
	text-align: center;
}

.topbar h1 { margin: 0 0 8px; font-size: 1.7rem; }
.topbar p { margin: 0 auto; max-width: 640px; opacity: .95; font-size: .97rem; }

.wrap {
	max-width: 860px;
	margin: -18px auto 40px;
	padding: 0 16px;
	display: grid;
	gap: 20px;
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: 0 6px 22px rgba(22, 32, 47, .06);
}

.card h2 { margin: 0 0 16px; font-size: 1.15rem; }

.form { display: grid; gap: 14px; }

.row {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

label { display: grid; gap: 6px; font-size: .88rem; color: var(--muted); }
label.narrow { max-width: 220px; }
label b.req { color: var(--danger); }

input, textarea, select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: .96rem;
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(47, 107, 255, .16);
}

textarea { resize: vertical; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.btn {
	display: inline-block;
	padding: 11px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.btn:hover { border-color: var(--brand); color: var(--brand-dark); }

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

.btn.primary:hover { background: var(--brand-dark); color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); }

.hint { margin: 0; font-size: .82rem; color: var(--muted); }

.alert {
	background: var(--danger-bg);
	border: 1px solid #f3c4c0;
	color: var(--danger);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: .9rem;
}

.alert ul { margin: 0; padding-left: 18px; }

.result { display: grid; gap: 16px; }

.qrbox {
	text-align: center;
	background: #fff;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 18px;
}

.qrbox img { max-width: 100%; height: auto; image-rendering: pixelated; }
.qrname { margin: 10px 0 0; font-weight: 600; }

.sharebox input { font-size: .85rem; color: var(--muted); }

.preview pre {
	background: #0f172a;
	color: #d8e2f2;
	padding: 14px;
	border-radius: 10px;
	overflow-x: auto;
	font-size: .82rem;
}

.preview summary { cursor: pointer; color: var(--brand-dark); font-size: .9rem; }

.howto {
	background: #f7f9ff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 18px;
}

.howto h3 { margin: 0 0 8px; font-size: 1rem; }
.howto ol { margin: 0; padding-left: 20px; font-size: .9rem; color: var(--muted); }
.howto li { margin-bottom: 6px; }

.foot {
	text-align: center;
	color: var(--muted);
	font-size: .84rem;
	padding-bottom: 30px;
}

@media print {
	.topbar, .form, .actions, .sharebox, .preview, .howto, .foot { display: none !important; }
	.card { border: none; box-shadow: none; }
	body { background: #fff; }
}