:root {
	--bg: #ffffff;
	--text: #0b0b0b;
	--muted: #5b5b5b;
	--orange: #ff7a00;
	--orange2: #ff9a3d;
	--border: #e7e7e7;
	--card: #ffffff;
	--shadow: 0 10px 30px rgba(0, 0, 0, .08);
	--bad: #c5162e;
	--ok: #0a7a2f
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	font-family: system-ui, Arial, sans-serif;
	background: #fff;
	color: #111
}

.topbar {
	background: linear-gradient(90deg, #0b0b0b, #141414);
	color: #fff;
	padding: 14px 16px;
	border-bottom: 4px solid var(--orange)
}

.topbar .inner {
	width: min(1020px, 100%);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px
}

.logo {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	color: #ff7a00
}

.wrap {
	width: min(1020px, 100%);
	margin: 18px auto 40px;
	padding: 0 16px;
	display: grid;
	gap: 16px
}

.card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: var(--shadow);
	padding: 18px
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 260px
}

.download-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: end
}

.input {
	padding: 11px 12px;
	border-radius: 12px;
	border: 1px solid var(--border);
	outline: none;
	font-size: 14px;
	background: #fff;
	width: 100%
}

.btn {
	border: 1px solid rgba(0, 0, 0, .12);
	background: #111;
	color: #fff;
	border-radius: 12px;
	padding: 11px 14px;
	font-weight: 800;
	cursor: pointer
}

.btn.orange {
	background: linear-gradient(180deg, var(--orange), var(--orange2));
	border-color: rgba(255, 122, 0, .65);
	color: #111
}

.dropzone {
	border: 2px dashed rgba(255, 122, 0, .55);
	background: rgba(255, 122, 0, .05);
	border-radius: 18px;
	padding: 22px;
	min-height: 170px;
	display: grid;
	place-items: center;
	text-align: center;
	position: relative
}

.dropzone input[type=file] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer
}

.hidden {
	display: none
}

.status {
	margin-top: 12px;
	border-radius: 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	background: #fff;
	display: none;
	font-size: 13px;
	white-space: pre-wrap;
	word-break: break-word
}

.status.show {
	display: block
}

.status.ok {
	border-color: rgba(10, 122, 47, .35);
	background: rgba(10, 122, 47, .06);
	color: var(--ok);
	font-weight: 700
}

.status.bad {
	border-color: rgba(197, 22, 46, .35);
	background: rgba(197, 22, 46, .06);
	color: var(--bad);
	font-weight: 700
}