* { 
	box-sizing: border-box; 
	margin: 0; 
	padding: 0; 
}

body { 
	font-family: system-ui, sans-serif; 
	background: #f5f4f0; 
	min-height: 100vh; 
}

header {
	background: #fff;
	border-bottom: 1px solid #e0ddd5;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
header h1 { 
	font-size: 18px; 
	font-weight: 500; 
	color: #1a1a1a; 
}

#status { 
	font-size: 13px; 
	background: #f0ede6; 
	border-radius: 8px; 
	padding: 6px 14px; 
	color: #555; 
	margin-left: auto; 
}

#status b { 
	color: #c0392b; 
}

#sync-status { 
	font-size: 12px; 
	color: #888; 
}

#mode-badge { 
	font-size: 12px; 
	padding: 4px 10px; 
	border-radius: 6px; 
	font-weight: 500; 
}

.admin-badge { 
	background: #fde8e8; 
	color: #c0392b; 
}

.view-badge { 
	background: #e8f5e1; 
	color: #2e7d32; 
}

#admin-hint {
	background: #fde8e8;
	border-left: 4px solid #c0392b;
	padding: 10px 20px;
	font-size: 13px;
	color: #7b1e1e;
}

.hint { 
	font-size: 12px; 
	color: #888; 
	padding: 8px 20px 4px; 
}

.scroll-wrap { 
	overflow: auto; 
	padding: 16px; 
}

.map-wrap { 
	position: relative; 
	display: inline-block; 
	min-width: 100%; 
}

#map-img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
	user-select: none; 
	pointer-events: none; 
}

#pot { 
	position: absolute; 
	width: 48px; 
	height: 48px; touch-action: none; 
	transform: translate(-50%, -50%); 
	display: flex; 
	align-items: center; 
	justify-content: center; 
}

#pot.dragging { 
	cursor: grabbing !important; 
}

#pot-cap { 
	position: absolute; 
	top: 2px; 
	left: 50%; 
	transform: translateX(-50%); 
	width: 26px; 
	height: 6px; 
	background: #c0392b; 
	border-radius: 3px; 
}

#pot-inner { 
	width: 40px; 
	height: 40px; 
	border-radius: 50%; 
	background: #fff; 
	border: 3px solid #c0392b; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	font-size: 22px; 
}