body {
	font-family:Arial;
	background:#f4f6fb;
	margin:0;
	padding:40px;
}

.container {
	max-width:950px;
	margin:auto;
}

.topbar {
	display:flex;
	gap:10px;
	margin-bottom:30px;
}

input {
	padding:12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size: 16px;
}

button {
	padding:12px 18px;
	border:none;
	border-radius:8px;
	background:#4f46e5;
	color:white;
	cursor:pointer;
}

select {
	padding:12px;
	border-radius:8px;
	font-size: 16px;
}

.qr-bar {
	display:flex;
	align-items:center;
	gap:24px;
	background:white;
	padding:18px;
	border-radius:14px;
	margin-bottom:14px;
	box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

.qr-small {
	width:70px;
	height:70px;
	cursor:pointer;
}

.qr-info {
	flex:1;
	display:flex;
	align-items:center;
	gap:26px;
	font-size:16px;
}

.qr-name {
	font-weight:bold;
	display:flex;
	align-items:center;
	gap:8px;
}

.qr-name svg {
	width:18px;
	height:18px;
}

.scan {
	display:flex;
	align-items:center;
	gap:6px;
}

.scan-label {
	font-size:15px;
	color:#666;
}

.scan-count {
	font-size:30px;
	font-weight:700;
}

.actions {
	display:flex;
	gap:14px;
}

.actions i {
	cursor:pointer;
	color:#555;
}

.actions i:hover { color:black; }

.url-link {
	color:#4f46e5;
	text-decoration:none;
}

.url-link:hover { text-decoration:underline; }

.modal {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.35);
	backdrop-filter:blur(6px);
	display:flex;
	align-items:center;
	justify-content:center;
}

.hidden { display:none; }

.modal-box {
	background:white;
	padding:28px;
	border-radius:14px;
	width:260px;
	text-align:center;
}

.modal-box input {
	width:calc(100% - 20px);
	margin-top:10px;
	padding:8px 10px;
	box-sizing:border-box;
	font-size: 16px;
}

.modal-actions {
	margin-top:18px;
	display:flex;
	gap:10px;
	justify-content:center;
}

.delete-btn {
	background:#ef4444;
	color:white;
	border:none;
}

.delete-btn:hover { background:#dc2626; }

.cancel-btn {
	background:white;
	color:black;
	border:1px solid black;
}

.cancel-btn:hover { background:#f3f3f3; }

.fab {
	position:fixed;
	right:30px;
	bottom:30px;
	width:56px;
	height:56px;
	background:#4f46e5;
	color:white;
	font-size:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	cursor:pointer;
	box-shadow:0 6px 16px rgba(0,0,0,0.25);
}

.fab:hover { background:#4338ca; }

.download-btn {
	background:white;
	color:black;
	border:1px solid black;
	padding:10px 20px;
	border-radius:8px;
	margin-top:12px;
	cursor:pointer;
}

.download-btn:hover { background:#f3f3f3; }

@media (max-width:700px) {
	.qr-info {
		flex-direction:column;
		align-items:flex-start;
		gap:6px;
	}

	body{ padding:20px; }
	.scan-count { font-size:24px; }
	.qr-bar { gap:14px; }
}