:root{
	--bg:#0b0f14;
	--card:#121925;
	--text:#e8eef7;
	--muted:#a9b7c9;
	--border:#253144;
	--btn:#2e6bff;
	--btn2:#2a3648;
	--ok:#35d07f;
	--bad:#ff5a6a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
	background:var(--bg);
	color:var(--text);
}

.topbar{
	padding:14px 16px;
	border-bottom:1px solid var(--border);
	background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
}
.title{font-weight:700;font-size:18px}
.subtitle{color:var(--muted);font-size:13px;margin-top:2px}

.wrap{
	max-width:720px;
	margin:0 auto;
	padding:14px 12px 28px 12px;
}

.card{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:16px;
	padding:14px;
	box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.row{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:12px;
}

.btn{
	border:0;
	background:var(--btn);
	color:white;
	padding:10px 12px;
	border-radius:12px;
	font-weight:650;
	cursor:pointer;
}
.btn:disabled{
	opacity:0.55;
	cursor:not-allowed;
}
.btn-secondary{
	background:var(--btn2);
	color:var(--text);
	border:1px solid var(--border);
}

.field{
	display:flex;
	flex-direction:column;
	gap:6px;
	flex:1;
	min-width:240px;
}
.field span{
	color:var(--muted);
	font-size:12px;
}
.field input{
	background:#0e1520;
	color:var(--text);
	border:1px solid var(--border);
	border-radius:12px;
	padding:10px 12px;
	outline:none;
}
.field input:focus{
	border-color:#3b82f6;
	box-shadow:0 0 0 3px rgba(59,130,246,0.2);
}

.videoWrap{
	position:relative;
	border-radius:16px;
	overflow:hidden;
	border:1px solid var(--border);
	background:#000;
	aspect-ratio: 3 / 4;
}
video{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.scanBox{
	position:absolute;
	left:10%;
	top:30%;
	width:80%;
	height:30%;
	border:2px solid rgba(255,255,255,0.65);
	border-radius:16px;
	box-shadow:0 0 0 9999px rgba(0,0,0,0.25);
	pointer-events:none;
}

.status{
	margin-top:12px;
	padding:10px 12px;
	border:1px solid var(--border);
	border-radius:14px;
	background:rgba(255,255,255,0.03);
	display:grid;
	gap:6px;
}
.status strong{color:var(--muted);font-weight:600}

.logWrap{
	margin-top:12px;
	border:1px solid var(--border);
	border-radius:14px;
	overflow:hidden;
}
.logTitle{
	padding:8px 10px;
	background:rgba(255,255,255,0.04);
	color:var(--muted);
	font-size:12px;
	border-bottom:1px solid var(--border);
}
.log{
	margin:0;
	padding:10px;
	max-height:220px;
	overflow:auto;
	background:#0e1520;
	color:var(--text);
	font-size:12px;
	line-height:1.4;
}

.hint{
	margin-top:12px;
	color:var(--muted);
	font-size:13px;
}
.hint ul{margin:10px 0 0 18px}